在JavaScript开发的现代世界中,有许多不同的前端框架可供我们用来编写应用程序,从旧的框架如Backbone.js到较新的Angular、React和Vue等。这些框架通常使用模型视图控制器(MVC)设计模式或其变体之一,例如模型视图表现器(MVP)或模型视图视图模型(MVVM)。当将这组模式一起讨论时,它们被一些人描述为“Model View Whatever”(MVW),或简称为MV*。

这种MV*风格的应用程序编写方式的一些好处包括模块化和关注点分离,但最大的优势之一是能够编写可测试的JavaScript代码。使用MV*允许我们对所使用的模型、视图和控制器进行单元测试。我们可以为各个类编写测试,并将这些测试扩展到覆盖一组类。我们还可以测试渲染函数,并确保网页上的DOM元素显示正确。我们可以模拟按钮点击、下拉选择、表单输入,甚至动画效果。然后,这些测试可以扩展到页面转换,包括模拟登录页面和访问权限。通过为应用程序构建大量的测试集合,我们能够确信代码按预期工作,并随时重构代码。

重构代码是指能够修改代码块或一组功能的底层实现,而不必担心会无意中引入错误。这意味着如果我们有一组测试,那么只要测试继续通过,我们就可以自由地重写底层代码的任何部分。有句老话说,没有测试的情况下,我们并非在重构代码,而只是随机更改事物。在大量的代码中,即使是一行代码的变动也可能产生不希望出现的副作用,在没有单元测试的情况下很难发现。

在本文中,我们将讨论与TypeScript相关的测试驱动开发。我们将重点介绍流行的Jest测试框架用于单元测试,并探索使用Jest进行测试的结构。然后,我们将讨论如何编写异步测试或处理异步代码的测试,以及如何编写实际修改DOM的测试。最后,我们将讨论端到端测试,即使用Protractor和Selenium对运行中网站进行测试。