基于React项目下的组件单元测试

什么是单元测试？

一般测试分成几个类型：单元测试、集成测试、功能测试。集成测试和功能测试不赘述。单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作，这里的单元是程序工作的最小工作单位。单元测试应该仅仅依赖输入，不依赖多余的环境，如果你的单元测试依赖很多环境，那么你可能需要的是集成测试。

单元测试又可以根据开发模式分成以下两类：

TDD, TDD指的是Test Drive Development，很明显的意思是测试驱动开发，也就是说我们可以从测试的角度来检验整个项目。大概的流程是先针对每个功能点抽象出接口代码，然后编写单元测试代码，接下来实现接口，运行单元测试代码，循环此过程，直到整个单元测试都通过。
BDD指的是Behavior Drive Development，也就是行为驱动开发。行为驱动开发是一种敏捷软件开发的技术，它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。主要是从用户的需求出发，强调系统行为。BDD最初是由Dan North在2003年命名，它包括验收测试和客户测试驱动等的极限编程的实践，作为对测试驱动开发的回应。
目前我接触到的项目都是BDD，国内的前端项目对单元测试重视程度没有那么高，TDD这种先编写单元测试的模式应用并不多。

但是但是，我真的想说，高覆盖率的单元测试，可以保证每次上线bug率大大降低，也是代码重构的基础。很多老项目，开发人员离职、新接手的人员不敢重构，慢慢称为团队负担、又不能下线，就是因为没有单元测试，改一点都怕出现不可测的bug。

单元测试框架选择

1.测试用例在node环境下运行，不依赖于浏览器，建议选用Jest + Enzyme

Jest 是 Facebook 发布的一个开源的、基于 Jasmine 框架的 JavaScript 单元测试工具。提供了包括内置的测试环境 DOM API 支持、断言库、Mock 库等，还包含了 Spapshot Testing、 Instant Feedback 等特性。

Enzyme是Airbnb开源的 React 测试类库，提供了一套简洁强大的 API，并通过 jQuery 风格的方式进行DOM 处理，开发体验十分友好。不仅在开源社区有超高人气，同时也获得了React 官方的推荐。

2.测试用例依赖于浏览器环境，建议选用Karma + Jasmine + Enzyme

Karma 是一个用来搜索测试文件、编译它们然后运行断言的测试器，Angular团队作品。

Jasmine 是一个断言库，它仅仅问“我们得到我们期待的东西了么？”。它提供类似describe，expect 和 it的函数，也提供监听一个函数或方法有没有被触发的监听器。

我这里选用的是node环境下的Jset + Enzyme进行的前端组件测试用例的开发和使用

环境数据

• nodejs v8.16.0
• npm 6.4.1
• 依赖版本

  "@babel/core": "^7.9.0",
  "@babel/plugin-transform-runtime": "^7.9.0",
  "@babel/preset-env": "^7.9.0",
  "@babel/preset-react": "^7.9.4",
  "babel-loader": "^8.0.5",
  "jest": "^25.1.0",
  "enzyme": "^3.11.0",
  "enzyme-adapter-react-16": "^1.15.2",
  "chai": "^4.2.0",
  

执行及结果

Demo.test.jsx示例代码