react16的单元测试1--基础环境安装

学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