React单元测试:Jest + Enzyme(一)

15

前言

前端的单元测试在很多人看来都是一个可有可无的东西,理由一般有下面几条(以下内容统一称单元测试为单测):

  • 写单测比较费时,有这个时间不如多做几个需求
  • 测试在验收的时候对页面的功能都会操作一遍,写单测相当于做无用功
  • 后端提供给前端的接口需要保证质量,因此需要做单测,但前端很少需要提供接口给其他人

其实,我大体上是同意以上观点的。在大部分的情况下,如果公司的业务不复杂,是完全没必要做单测的。但如果涉及到以下几个方面,你就要考虑是否有必要引入单测了:

  • 业务比较复杂,前端参与的人员超过3人
  • 公司非常注重代码质量,想尽一切办法杜绝线上出bug
  • 你是跨项目组件的提供方
  • 你在做一个开源项目

React项目如何做单测

目前比较流行的React单测组合是Jest+Enzyme,下面我们先对它们做一个简单的了解。

Jest是Facebook开发的一个测试框架,它集成了测试执行器、断言库、spy、mock、snapshot和测试覆盖率报告等功能。React项目本身也是使用Jest进行单测的,因此它们俩的契合度相当高。

Enzyme是由airbnb开发的React单测工具。它扩展了React的TestUtils并通过支持类似jQuery的find语法可以很方便的对render出来的结果做各种断言。

这将会是一个系列教程,作为教程的第一篇,我们先定一个小目标:将Jest应用到已有的React项目中并跑一个简单的单测(假设打包工具为webpack)。

Jest的安装与配置

npm install --save-dev jest jest-cli babel-jest

其中,babel-jest的作用是让单测代码支持ES6。安装完后,在项目的根目录新建__jest__文件夹和__tests__文件夹,此时__mocks__文件夹我们暂时不管,如下图所示:
clipboard.png

mudules文件夹将存放各个模块的单测代码,而utils文件夹里面是对一些公用的函数写的测试代码。

由于我的项目使用webpack作为打包工具,于是我在package.json里面做了以下的配置:

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__jest__/__mocks__/fileMock.js",
      "\\.(css|scss)$": "identity-obj-proxy",
      "^cpn(.*)$": "<rootDir>/src/components$1"
    }
  }

moduleFileExtensions对应webpack中的extensions;moduleDirectories对应webpack中的modulesDirectories;moduleNameMapper对应webpack中的alias。这里的<rootDir>对应我们项目的根目录。

对于多媒体文件(jpg/png等),我们可以简单的手动mock一下:

// <rootDir>/__jest__/__mocks__/fileMock.js
module.exports = 'test-file-stub';

对于css和scss文件,我们使用identity-obj-proxy来mock,它会在引用到class的地方直接返回class的类名:

npm install --save-dev identity-obj-proxy

剩下的只是对一些简写路径的配置。

更详细的说明可以看这里

至此,Jest已经安装配置完毕。为了验证安装配置是否成功,我们写一个简单的测试代码:

import {add} from 'common/utils/math.js'

test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
});

同时,在package.json文件中,加入以下script:

  "scripts": {
    "test": "jest __jest__/__tests__"
  }

此时在命令行输入npm run test,出现以下结果,说明Jes安装成功并通过第一个测试
clipboard.png

总结

按照上面说的步骤,如果一切顺利,你的第一个单测用例应该成功跑起来了!我们来回顾下我们都做了些什么:

  • 安装Jest并让其支持ES6语法
  • 新建对应的单测文件夹并新建一个单测文件
  • 针对项目的webpack做相应的Jest配置
  • 配置运行测试脚本

万事开头难,你已经踏出万里长征的第一步了!在下一篇文章中,我将会详细介绍如何使用Jest来mock方法和数据,敬请期待。

你可能感兴趣的

载入中...