您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　8.2.1 单元测试框架

　　构建React和Redux单元测试环境，首先要确定测试框架，有很多选择，最常见的是以下两种：

　　·用Mocha测试框架，但是Mocha并没有断言库，所以往往还要配合Chai断言库来使用，也就是Mocha+Chai的组合。

　　·使用React的本家Facebook出品的Jest，Jest自带了断言等功能，相当于包含了Mocha和Chai的功能，不过Jest的语法和Chai并不一致。

　　这两种方法各有千秋，没有哪一种具备绝对优势。

　　在create-react-app创建的应用中自带了Jest库，所以本书的代码库中单元测试都是基于Jest框架编写的代码，在任何一个create-react-app产生的应用代码目录下，用命令行执行下列代码，就会进入单元测试的界面：

　　npm run test

　　上面的命令在执行完单元测试后不会结束，而是进入待命状态，如图8-1所示。

　　在待命状态下，任何对相关代码的修改，都会触发单元测试的运行，而且Jest很智能，只运行修改代码影响的单元测试。同时也提供了强行运行所有单元测试代码、选择只运行满足过滤条件的单元测试用例等高级功能。

　　图8-1 Jest的命令行界面

　　Jest会自动在当前目录下寻找满足下列任一条件的JavaScript文件作为单元测试代码来执行。

　　·文件名以.test.js为后缀的代码文件；

　　·存于__test__目录下的代码文件。

　　一种方式，是在项目的根目录上创建一个名为test的目录，和存放功能代码的src目录并列，在test目录下建立和src对应子目录结构，每个单元测试文件都以.test.js后缀，就能够被Jest找到。这种方法可以保持功能代码src目录的整洁，缺点就是单元测试中引用功能代码的路径会比较长。例如，功能代码在src/todo/actions.js文件中，对应的单元测试代码放在test/todo/actions.test.js文件中，这样一来，在actions.test.js文件中导入被测试的功能代码，就需要一个很长的路径名，代码如下：

　　import * as actions from '../../src/todos/actions.js';

　　另一种存放单元测试代码的策略是在每一个目录下创建__test__子目录，用于存放对应这个目录的单元测试。这种方法因为功能代码和测试代码放在一起，容易比对，缺点就是散布在各个目录下的__test__看起来不是很整洁。

　　具体用何种方式布局单元测试代码文件，开发者可以自行决定，在本书的例子中，更注重功能代码目录的整洁，所以测试代码都放在和src并排的test目录中，文件以.test.js后缀结尾。 深入浅出React和Redux