学react最痛苦的是什么?知识更新太快。
最近在学写单元测试,网上找的react单元测试资料,按教程的git地址安装,示例没有问题。但如果要放到自己项目中,代码就运行不了。说到底还是版本比较久远,安装环境配置又有了新的不同(摔~~)。这次接触单元测试,踩了不少坑,纪录一下踩坑历程。
非常重要的提示:本文提到的单元测试是针对react16的,默认你已经安装了react16的相关配置。
1、安装依赖包
npm install --save-dev jest babel-jest
npm install --save-dev enzyme
npm install --save-dev enzyme-adapter-react-16
2、说明:
Jest
Jest是 Facebook 出品的一个测试框架,相对其他测试框架,其一大特点就是就是内置了常用的测试工具,比如自带断言、测试覆盖率工具,实现了开箱即用。此外, Jest 的测试用例是并行执行的,而且只执行发生改变的文件所对应的测试,提升了测试速度。
编写单元测试的语法通常非常简单;基本上以下四个单词,就足以应付大多数测试情况了:- describe: 定义一个测试套件
- test:定义一个测试用例
- expect:断言的判断条件
- toEqual:断言的比较结果
describe('test ...', function() {
test('should ...', function() {
expect(sth).toEqual(sth);
expect(sth.length).toEqual(1);
expect(sth > oth).toEqual(true);
});
});
babel-jest
由于是面向src目录下测试其React代码,并且还使用了ES6语法,所以项目下需要存在一个.babelrc文件:
{
"presets": ["env", "react"]
}
Enzyme
Airbnb开源的react测试类库 Enzyme 提供了一套简洁强大的API,并通过jquery风格的方式进行dom处理,开发体验十分友好。不仅在开源社区有超高人气,同时也获得了react官方的推荐。
enzyme-adapter-react-16
使用enzyme还需要根据React的版本安装适配器,适配器对应表如下:
Enzyme Adapter Package | React semver compatibility |
---|---|
enzyme-adapter-react-16 | ^16.0.0 |
enzyme-adapter-react-15 | ^15.5.0 |
enzyme-adapter-react-15.4 | 15.0.0-0 - 15.4.x |
enzyme-adapter-react-14 | ^0.14.0 |
enzyme-adapter-react-13 | ^0.13.0 |
我们安装的React版本为^16.3.0,在这里我们安装enzyme-adapter-react-16
3、启动配置
最后,我们在package.json里面做了以下的配置:
"scripts": {
"test": "jest",
},
到此,一个简单的测试环境搭建完成。
执行npm test,自动识别并测试符合其规则的(一般是 __test__ 目录下的)用例文件。
参考资料
http://www.aliued.com/?p=4095
http://www.51testing.com/html/57/n-3724257.html