什么是单元测试
一般测试分成几个类型:单元测试、集成测试、功能测试。集成测试和功能测试不赘述。单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作,这里的单元是程序工作的最小工作单位。单元测试应该仅仅依赖输入,不依赖多余的环境,如果你的单元测试依赖很多环境,那么你可能需要的是集成测试。
单元测试又可以根据开发模式分成以下两类:
- TDD, TDD指的是Test Drive Development,很明显的意思是测试驱动开发,也就是说我们可以从测试的角度来检验整个项目。大概的流程是先针对每个功能点抽象出接口代码,然后编写单元测试代码,接下来实现接口,运行单元测试代码,循环此过程,直到整个单元测试都通过。
- BDD指的是Behavior Drive Development,也就是行为驱动开发。行为驱动开发是一种敏捷软件开发的技术,它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。主要是从用户的需求出发,强调系统行为。BDD最初是由Dan North在2003年命名,它包括验收测试和客户测试驱动等的极限编程的实践,作为对测试驱动开发的回应。
目前我接触到的项目都是BDD,国内的前端项目对单元测试重视程度没有那么高,TDD这种先编写单元测试的模式应用并不多。
但是但是,我真的想说,高覆盖率的单元测试,可以保证每次上线bug率大大降低,也是代码重构的基础。很多老项目,开发人员离职、新接手的人员不敢重构,慢慢称为团队负担、又不能下线,就是因为没有单元测试,改一点都怕出现不可测的bug。
单元测试的编写原则,建议参考 https://github.com/mawrkus/js-unit-testing-guide
React单元测试框架
这里分成两种情况:
- 你的代码可以全部在node环境运行,不需要浏览器环境,那么选用Jest + Enzyme 。
Jest 是 Facebook 发布的一个开源的、基于 Jasmine 框架的 JavaScript 单元测试工具。提供了包括内置的测试环境 DOM API 支持、断言库、Mock 库等,还包含了 Spapshot Testing、 Instant Feedback 等特性。
Enzyme是Airbnb开源的 React 测试类库,提供了一套简洁强大的 API,并通过 jQuery 风格的方式进行DOM 处理,开发体验十分友好。不仅在开源社区有超高人气,同时也获得了React 官方的推荐。
- 你的代码依赖浏览器环境,那么建议选用Karma + Jasmine + Enzyme。
Karma 是一个用来搜索测试文件、编译它们然后运行断言的测试器,Angular团队作品。
Jasmine 是一个断言库,它仅仅问“我们得到我们期待的东西了么?”。它提供类似describe,expect 和 it的函数,也提供监听一个函数或方法有没有被触发的监听器。
Jest + Enzyme
Jest
Jest其实包括了断言库和运行器。断言库是写单元测试时候使用的接口,Jest内置的断言库是Jasmine,使用语法如下:
describe("A suite is just a function", function() {
var a;
it("and so is a spec", function() {
a = true;
expect(a).toBe(true);
});
});
describe方法表示进行一组单元测试(Suites),it内部是一组测试中的某一个测试(Specs)。具体语法请参考 https://jasmine.github.io/tutorials/your_first_suite 和 https://jestjs.io/docs/en/api 。
Jest的runner使用很简单,配置好config文件就可以:
module.exports = {
transform: {
"^.+\\.tsx?$": "ts-jest"
},
testURL: "http://localhost",
testRegex: "\\.(test|spec)\\.(jsx?|tsx?)$",
testPathIgnorePatterns: [
"/node_modules/"
],
moduleFileExtensions: [
"ts",
"tsx",
"js",
"jsx"
],
testResultsProcessor: "jest-junit",
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file-mock.js",
"\\.(css|scss)$": "<rootDir>/__mocks__/style-mock.js"
},
collectCoverage: true,
collectCoverageFrom: [
"**/*.{ts,tsx}",
"!**/*.d.ts",
"!**/node_modules/**"
],
coverageDirectory: "<rootDir>/tests-coverage",
coverageReporters: ["json", "html"]
}
其他可以配置的jest config,请参考 https://jestjs.io/docs/en/configuration 。
Enzyme
Enzyme的基本用法:
import {
mount, configure} from 'enzyme';
import * as Adapter from