Jest单元测试配置

最近在做公司级UI组件库,对于测试这块,决定继续沿用Jest。因为追求简单,果断舍弃拷贝粘贴这个捷径,从零开始进行配置。这里Mark下。

上概念

玩之前,先了解下Jest是干嘛的

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

上述是官方的介绍,由此我们知道Jest不止适用于React,JS。

前端技术栈

贴下,我的前端项目使用的技术栈。

  • React
  • TypeScript
  • antd

so,基于此,来配置测试

基本配置

package.json

这里只贴出因为UT所需要安装的包

1
2
3
4
5
6
7
8
9
10
11
{
"devDependencies": {
"@types/enzyme": "3.1.13",
"@types/jest": "23.3.1",
"enzyme": "3.5.0",
"enzyme-adapter-react-16": "1.3.0",
"identity-obj-proxy": "3.0.0",
"jest": "23.5.0",
"ts-jest": "23.1.4",
}
}

各个包的作用

  1. @types/**

    所需类库的TS定义文件

  2. enzyme

    一个测试工具,注意它只能用于react

  3. enzyme-adapter-react-16

    服务于react组件测试

  4. identity-obj-proxy

    mock对象,比如UT测试组件可能导入了图片或者less样式。

  5. jest

    目标测试框架,肯定要安

  6. ts-jest

    因为我们是用TS写的前端项目,so需要安装这个包,假如我们用JS写的前端,那就可以删除这个包。

jest.conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
transform: {
'^.+\\.tsx?$': 'ts-jest'
},
testMatch: ['<rootDir>/test/**/+(*.)+(spec.ts?(x))'],
coverageDirectory: '<rootDir>/test-results/',
testPathIgnorePatterns: ['<rootDir>/node_modules/'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
globals: {
'ts-jest': {
tsConfigFile: './tsconfig.test.json'
}
},
moduleNameMapper: {
'\\.(less)$': 'identity-obj-proxy'
},
setupFiles: ['<rootDir>/test/enzyme-setup.ts']
};

script

1
2
3
4
5
{
"scripts": {
"test": "jest --coverage --logHeapUsage --maxWorkers=2 --config ./jest.conf.js"
}
}
  • coverage是为了显示测试代码覆盖率信息
  • maxWorkers是为了提速UT耗时,这个值建议不用过大。

更多配置,看官网

关于maxWorkers,可以看这里

jest中的配置关键点

  1. 因为我这里的前端组件中有导入less文件,所以这里做了模块代理。
  2. setupFiles之所以配置,是因为我用enzyme进行了react组件测试

遇到的问题

test match 0

在实际跑UT,一开始发现出现了match为0.直接原因就是Jest找不到我们的test case。

解决办法是两点

  1. testMatch确保路径正确
  2. moduleFileExtensions要加上

写在最后

经过上述的配置,执行test命令,即可看到下面的输出结果。当然jest的配置比这里的多得多,这里只是个简单的起步,接下来就是根据实际情况逐步改进丰富了。

虽然只是粗糙而简短介绍,也希望能帮到大家吧。

参考资料