Unit Testing

离殊

发布于 2022-04-01 16:07:41

1.3K0

发布于 2022-04-01 16:07:41

文章被收录于专栏：DingLin 随笔

前言

Jest 是 Facebook 推出的一种 Unit Testing 工具，当然还有很多其他类似的单元测试库，比如 mocha ava 等等

写的好的单元测试可以帮助你提升开发效率以及代码质量，并对项目的维护有莫大的帮助，例如重构。

#应该测试你的程序

其实每一个项目都应该使用单元测试，单元测试可以很好的保证你的代码不会欺骗你。

世界上没有任何一个完美的程序，也更不会有完美的人可以写出没有任何问题的代码。

#配置单元测试

#安装 Jest

我们使用 yarn 来安装 Jest 包

yarn add -D jest

在 package.json 文件中加入测试命令

{
  "scripts": {
    "test": "jest"
  }
}

之后只需要在 Command Line 中输入 yarn test 即可开启测试

#配置时遇到的麻烦

在我配置 Jest 时遇到了几个麻烦，让我的测试代码运行不起来，总结一下这几个小问题。

运行 Jest 测试代码时出现 Cannot use import statement outside a module

不能在其他模块使用 import 语句

出现这个问题的主要原因在于 Webpack 编译时并未转换 Jest，导致测试代码不识别 ES6 语法，需要配置一下 Jest 的 transform 字段

JS 代码，需要安装 babel-jest 包来转换代码

transform: {
  "^.+\\.js?(x)?$": "babel-jest"
}

TS 代码，需要额外安装一个 ts-jest 包来解析

transform: {
  "^.+\\.(ts|tsx|js)$": "ts-jest"
}

在项目中配置了别名。但是 Jest 并不认识别名

这个问题大概都会遇到吧，几乎在项目中都会有 Webpack 来做别名处理，解决那种点点引用方式，例如：

// 点点表示法
import SomeComponent from '../../../../components/SomeComponent'

// 别名表示法
// @ 代表 src/ 目录
import SomeComponent from '@/components/SomeComponent'

在 jest.config.js 文件中配置 moduleNameMapper 字段即可

{
  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1'
  }
}

用来匹配 @/ 都指向到根目录/src/前文中(.*)`匹配的分组

未忽略 node_modules 文件夹下的代码

一般来说这个是默认的，Jest 默认会忽略 node_modules 文件夹下的文件和代码

无法识别 css scss 等样式文件

在我们组件当中大部分都会有 css 或者 scss 等文件，但是 Jest 并无法处理这类文件，此时需要将此类样式文件都 Mock 掉

{
  moduleNameMapper: {
    '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js'
  }
}

<rootDir>/__mocks__/styleMock.js 文件代码

module.exports = {}

如果要使用 Enzyme 辅助库的话，需要额外配置一下

配置 setupFiles 字段，该字段的含义是在初始化运行单元测试时，需要执行的文件

{
  setupFiles: ['<rootDir>/__mocks__/enzymeMock.js']
}

<rootDir>/__mocks__/enzymeMock.js 文件代码

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

其他配置可以参考官网的配置文档来进行进一步的配置

#如何做好单元测试

#一个好的单元测试应该遵循下面三个步骤

// production code
const computeSumFromObject = (a, b) => {
  return a.value + b.value
}

// testing code
it('should return 5 when adding object a with value 2 and b with value 3', () => {
  // given - 准备数据
  const a = { value: 2 }
  const b = { value: 3 }

  // when - 调用被测函数
  const result = computeSumFromObject(a, b)

  // then - 断言结果
  expect(result).toBe(5)
})

Given -> When -> Then

准备输入数据、调用被测函数、断言输出结果。