Jest单元测试配置

发表于 更新于 本文字数： 2.2k 阅读时长 ≈ 4 分钟
本文是作者对Jest单元测试配置的介绍，包括Jest单元测试配置的优势、实现细节、相关资料等，这些步骤可以帮助作者提高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
12
{
  "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
19
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的配置比这里的多得多，这里只是个简单的起步，接下来就是根据实际情况逐步改进丰富了。

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

参考资料