React实战-React标配单元测试工具Jest

React实战-React标配单元测试工具Jest

目前Javascript的测试工具很多，但是针对React的测试策略，Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址：https://facebook.github.io/jest/。我们可以看到Jest官网宣称的是：Painless JavaScript Testing。是Facebook用于测试服务和React应用程序的JavaScript单元测试框架。

所谓单元测试也就是对每个单元进行测试，通俗的将一般针对的是函数，类或单个组件，不涉及系统和集成。单元测试是软件测试的基础测试。Jest主要有以下特点：

l 适应性：Jest是模块化、可扩展和可配置的。

l 沙箱和快速：Jest虚拟化了JavaScript的环境，能模拟浏览器，并且并行执行

l 快照测试：Jest能够对React 树进行快照或别的序列化数值快速编写测试，提供快速更新的用户体验。

l 支持异步代码测试：支持promises和async/await

l 自动生成静态分析结果：不仅显示测试用例执行结果，也显示语句、分支、函数等覆盖率。

1.为什么要使用单元测试工具

我们在开发过程中，不使用测试工具依然可以自己写代码进行单元测试，但是我们的代码存在着相互调用关系，在测试过程中我们又希望使单元相对独立而又能正常运行，就需要我们对被测函数的依赖函数和环境进行mock，并且在测试数据输入、测试执行和测试结果检查方面存在很多相似性，测试工具正是为我们在这些方面提供了方便。

2.如果使用Jest

使用Jest的过程并不复杂，主要分以下几步：

a.配置Jest

与使用所有的Js包一样：可以先配置package.json，再执行npm install。也可以直接采用npm install --save-dev jest命令。

b.编写测试脚步

例如被测函数为：

function sum(a,b){

return a + b;

};

module.exports = sum;

测试脚步：

test('add 1+2 equal 3',()=>{

const sum = require('./sum');

expect(sum(1,2)).toBe(3);

});

c.执行脚本

执行脚本也可以有多种方式：

1）在配置文件中配置

"scripts": {

      "test": "jest"

  },

2）直接执行命令

需要安装全局jest命令: npm install -g jest。

直接进入项目，执行命令:jest

d.查看测试结果

脚步执行后可直接看到测试结果，自动显示测试用例的执行结果和测试用例数量。如果想看到覆盖率:jest --coverage

3.使用约束

使用jest可能会奇怪，jest是如何在源码文件中找到测试脚步并执行的。配置文件中并没有配置测试脚本的入口。其实在jest中我们对脚步的定义是有约束的，可以采用以下几种方式。

l 创建__tests__目录，xxx-test.js

l 直接创建Xxx.test.js

l 直接创建xxx.spec.js