前端测试测什么###

Unit testing。具体到现在组件化的前端代码中就是对每个组件（中的每个函数）来进行单独的测试，这些测试包括组件的渲染结果、组件的事件处理、乃至某个函数被调用的次数等。

在看Jest官方文档的时候看到一种测试方法（它称之为snapshot testing），每次测试它会把一些React组件渲染得到的DOM tree保存下来，并和之前得到的结果做比较，如果结果没有变化则算是通过测试（这里以该组件没有什么改动为前提）。

还有一种测试和snapshot testing有一些像，叫做visual regression testing，该测试每次会把渲染好的页面截图保存为图片，再和之前保存的结果图片进行像素级别的比较。

End-to-end testing，这种测试也很好理解，即利用脚本在渲染好的页面上来模拟人为的一系列页面操作，通过操作结果来判断页面的功能是否正常运作（因为是在“实地”操作，所以找到的bug也可能是后端的）。通常，在每个步骤中也会进行页面的截图来进行visual regression testing。（对于这类测试，其实可以通过monitor页面的操作变化（手动操作）来自动生成操作的脚本，这样我们就只需要写assertion就可以啦）

Performance testing，相比于后端，前端的性能测试就要简单不少，并且已经有比较成熟的测试工具，其目标就是花尽可能短的时间加载完整个页面。为了提高前端的性能，要从多个方面入手，不仅仅是JS代码优化这一块，比如还要减少资源的请求数目、异地部署CDN、压缩资源、优先加载页面中重要的部分（准确地说这只算是提高用户体验，但提高性能目的不就是优化用户体验嘛）等。当然，现在前端的大部分方面都已经有比较成熟的优化解决方案了，比如webpack打包的JS代码已经做了minify，能让JS代码体积减少到原来的1/N，因此我们所最需关注的仍然回到了JS代码逻辑本身。

前端测试框架###

Selenium是一个比较古老的测试框架了，它主要被用来做End-to-end testing，因为是和浏览器来打交道，所以本身的实现并没有被JS所绑定，多种语言都有它的实现。

Jasmine是一个JavaScript的测试框架，它并不依赖于浏览器（即纯粹测试JavaScript代码本身，就像pytest之于Python），是一个比较通用的测试框架：

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM.

Jest是Facebook为React量身打造的一款测试框架，它本身已经使用了Jasmine作为基础，使用create-react-app创建的项目会默认将Jest作为测试框架导入进来。

Mocha（明明是摩卡，却总能联系到抹茶~）是另一个比较通用的JavaScript测试框架，不同于Jasmine，Mocha本身不包含任何assertion的函数供调用，你可以使用Node.js自带的assert模块，也可以使用其他第三方的lib，比如比较火的Chai（看名字就很搭好吧）。另外，在测试的写法上Mocha也要更加灵活一些：

Mocha’s “interface” system allows developers to choose their style of DSL. Mocha has BDD, TDD, Exports, QUnit and Require-style interfaces.

总的而言，Mocha要比Jasmine更加灵活，更加灵活意味着它的可能性要更多，上限更高，但同时也增加了学习的成本。

除此之外，还需要提一下Karma，它并不是一个测试框架，你可以认为它是比测试框架更上层的东西，负责（在各种浏览器平台上）去调用各种测试框架下的测试代码，并将结果输出出来。

最后我想说，框架这种东西，其实并没有啥纠结的必要，先挑一个比较流行的用起来，用熟了看需求再决定要不要去尝试其他的。