React-基于Mocha搭建测试框架

Posted 2021-04-26 火麒麟2019

什么是测试？

测试是一段检测你的应用代码是否按预期执行的代码。主要包含两类，一类是TDD(Test-Driven Development：测试驱动开发), 一类是BDD(Behavioc-Driven Development：行为驱动开发)。

TDD是一种使用自动化单元测试来推动软件设计并强制依赖关系解耦的技术。TDD侧重点偏向开发，通过测试用例来规范约束开发者编写出质量更高、bug更少的代码。使用这种做法的结果是一套全面的单元测试，可随时运行，以提供软件可以正常工作的反馈。

BDD是一种敏捷软件开发的技术。它对TDD进行了扩展，更加侧重设计，其要求在设计测试用例的时候对系统进行定义，倡导使用通用的语言将系统的行为描述出来，将系统设计和测试用例结合起来，从而以此为驱动进行开发工作。

不管是TDD还是BDD，是在开发前写测试代码还是开发后写测试代码并不重要。只要你写了足够多的测试用例来测试你的代码，直到你对你的生产代码已经足够有信心就好。

为什么测试？

1. 正确性：测试可以验证代码的正确性，在上线前做到心理有底；

   
   

2. 自动化：通过编写测试用例，可以做到一次编写，多次运行，无需每次都通过手动和console来测试；

   
   

3. 保证重构：产品迭代速度很快，有测试用例做后盾，就可以大胆的进行重构。

有哪几类测试类型？

测试类型主要包括单元测试、集成测试、系统测试。

单元测试就是以代码单元为单位进行测试，代码单元可以是一个函数，一个模块，或者一个类，这个单元基本是独立于其他模块的。单元测试是最容易理解、也最容易实现的测试方式。给单元测试一个输入，让它自动执行，将输出结果和预期结果做对比看其是否正确。

很多情况代码还是会有函数和I/O依赖，比如一些code依赖Ajax，localStorage或indexedDB，这样的代码是不能被 united-test 的，于是我们需要 mock 相应依赖的接口拿到上下文测试我们的代码，这样的测试叫集成测试。

将经过集成测试的软件，作为计算机系统的一部分，与系统中其他部分结合起来，在实际运行环境下进行一系列严格有效的测试，以发现软件潜在的问题，保证系统的正常运行即系统测试。

如何搭建测试框架？

前端测试主要包含前端测试运行框架：Karma，测试框架：Mocha、Jasmine、Jest等，断言库：chai.js、should.js等，具体他们之间的区别在这里不做详细描述。接下来主要讲解的是基于Mocha和chai.js来搭建测试框架（备注：前端框架主要是react全家桶）。

1.下载相关的库

npm|cnpm install mocha mochawesome chai --save-dev || yarn add mocha mochawesome chai -D

2.设置目录结构

在项目根目录下创建test文件夹，并在package.json中添加命令如："test": "mocha"

3.设置mocha参数

mocha运行时的参数，可跟在mocha命令后面，也可在test文件夹下新建mocha.opts文件，将参数放在里面，具体参数含义如下：

 --compilers: 设置源代码的转译库，如--compilers js:babel-core/register，主要针对源代码中的es6, react等代码进行转译；

--require: 添加执行运行之前所加载的文件或库，如--require  babel-polyfill、--require ./setup.js；

--reporter mochawesome: 此参数依赖mochawesome库，生成测试报告，测试报告会在项目根目录下生成；

--recursive: 递归查找测试文件，不添加则只查找test文件目录下的一层文件；

--watch: 监听test文件夹下的文件，有改动则立即重新执行。

针对测试文件编写测试用例，具体结构如下图：

4.集成浏览器处理方法

因为mocha是在node环境下运行的，所以如果源代码中有涉及到浏览器相关属性，如window、document、navigator等，需要利用jsdom进行处理, 可在setup.js（备注：见第3步里的--require参数）文件中添加如下代码：

5.针对react组件进行测试

对react组件测试需要借助enzyme库，如果需要对react组件做生命周期函数的替代，则可以利用spy-react-component-lifecyle库。另外还可以利用sinon库辅助前端测试，在我们的代码需要与其他系统或者函数对接时，它可以模拟这些场景，从而使我们测试的时候不再依赖这些场景。具体两个库的用法再次不做详细描述，可查阅相关文档。

6.引入或者创建store

针对的测试源代码中有用到store，则需要将store引入。如果引入有问题，可重新引入或者创建store。如果项目中有用到require.context方法来生成reduces，则需要将此方法换掉，通过node的fs模块去重新读取，因为node没有require.context方法。具体如下:

7.生产覆盖率报告

生产覆盖率报告主要用istanbul库，可添加命令如下：istanbul cover node_modules/mocha/bin/_mocha。运行此命令会在根目录下生成覆盖率报告。

总结

• 介绍了对测试的理解
  

• 介绍了为什么要测试

• 介绍了测试类型

• 介绍了测试环境搭建步骤