对 React 组件进行单元测试

正文

请到「今天看啥」查看全文

不同于"传统的"(其实也没出现几年)的 jasmine / Mocha / Chai 等前端测试框架 -- Jest 的使用更简单，并且提供了更高的集成度、更丰富的功能。

Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。

此外， Jest 的测试用例是并行执行的，而且只执行发生改变的文件所对应的测试，提升了测试速度。

四个基础单词

编写单元测试的语法通常非常简单；对于 jest 来说，由于其内部使用了 Jasmine 2 来进行测试，故其用例语法与 Jasmine 相同。

实际上，只要先记这住四个单词，就足以应付大多数测试情况了：

• describe ： 定义一个测试套件
• it ：定义一个测试用例
• expect ：断言的判断条件
• toEqual ：断言的比较结果

describe('test ...', function() {
	it('should ...', function() {
		expect(sth).toEqual(sth);
		expect(sth.length).toEqual(1);
		expect(sth > oth).toEqual(true);
	});
});

配置

Jest 号称自己是一个 “Zero configuration testing platform”，只需在 npm scripts 里面配置了 test: jest ，即可运行 npm test ，自动识别并测试符合其规则的（一般是 __test__ 目录下的）用例文件。

实际使用中，适当的自定义配置一下，会得到更适合我们的测试场景：

//jest.config.js

module.exports = {
	modulePaths: [
		"<rootDir>/src/"
	], 
	moduleNameMapper: {
		"\.(css|less)$": '<rootDir>/__test__/NullModule.js'
	},
	collectCoverage: true,
	coverageDirectory: "<rootDir>/src/",
	coveragePathIgnorePatterns: [
		"<rootDir>/__test__/"
	],
	coverageReporters: ["text"],
};

在这个简单的配置文件中，我们指定了测试的“根目录”，配置了覆盖率（内置的 istanbul ）的一些格式，并将原本在webpack中对样式文件的引用指向了一个空模块，从而跳过了这一对测试无伤大雅的环节

//NullModule.js

module.exports = {};

另外值得一提的是，由于 jest.config.js 是一个会在 npm 脚本中被调用的普通 JS 文件，而非 XXX.json 或 .XXXrc 的形式，所以 nodejs 的各自操作都可以进行，比如引入 fs 进行预处理读写等，灵活性非常高，可以很好的兼容各种项目

babel-jest

由于是面向 src 目录下测试其React代码，并且还使用了ES6语法，所以项目下需要存在一个 .babelrc 文件：

{
  "presets": ["env", "react"]
}

以上是基本的配置，而实际由于webpack可以编译es6的模块，一般将babel中设为 { "modules": false } ，此时的配置为：

//package.json

"scripts": {
    "test": "cross-env NODE_ENV=test jest",
},

//.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-1",
    "react"
  ],
  "plugins": [
  	"transform-decorators-legacy",
    "react-hot-loader/babel"
  ],
  "env": {
    "test": {
      "presets": [
	    "es2015", "stage-1", "react"
	  ],
	  "plugins": [
	  	"transform-decorators-legacy",
	    "react-hot-loader/babel"
	  ]
    }
  }
}

Enzyme

Enzyme 来自于活跃在 JavaScript 开源社区的 Airbnb 公司，是对官方测试工具库（react-addons-test-utils）的封装。

这个单词的伦敦读音为 ['enzaɪm] ，酵素或酶的意思，Airbnb 并没有给它设计一个图标，估计就是想取用它来分解 React 组件的意思吧。

它模拟了 jQuery 的 API，非常直观并且易于使用和学习，提供了一些与众不同的接口和几个方法来减少测试的样板代码，方便判断、操纵和遍历 React Components 的输出，并且减少了测试代码和实现代码之间的耦合。

一般使用 Enzyme 中的 mount 或 shallow 方法，将目标组件转化为一个 ReactWrapper 对象，并在测试中调用其各种方法：

import Enzyme,{ mount } from 'enzyme';

...

describe('test ...', function() {
	
	it('should ...', function() {
		wrapper = mount(
			<MyComp isDisabled={true

请到「今天看啥」查看全文