jest+testing-library/react 单元测试 react+antd 的实践(一)

前言

之前一次想学写单测，但是一直没有动力，因为感觉ui测试写起来比较复杂而且麻烦，再加上实际开发项周期短，没有时间给写单测，但是最近公司比较注重质量，对测试bug数提出了限制，而且还有惩罚措施，为了避免被惩罚，再因为没有写单测，在给的自测时间里，后端同学可以通过梳理代码，补单测来进行测试，而我只能不断的**点点点…**来测试，很low且没效率，心里也没底（虽然最后测试也没测出bug），总感觉机器比人可靠，因此我后面就开始学习单测，来补全这个项目的测试，在结合gitlab ci ，sonarqube来进行测试报告。
我用的框架是react, 官方推荐jest+testing-library/react ，所以我选择了这两个来写单测。因为用的是antd的框架，平时的业务代码也类似，网上也没太多实际例子，就在这里记录下来，一些常用场景怎么写单测, 以及如何配置。

install

install jest

1. 首先安装jest (如果是用react-create 生成的会自带jest 可以跳过这里) `` yarn add --dev jest
2. 安装 babel yarn add --dev babel-jest @babel/core @babel/preset-env 新建babel.config.js文件

module.exports = {
   
  presets: [['@babel/preset-env', {
   targets: {
   node: 'current'}}]],
};

2. 支持ts yarn add --dev @babel/preset-typescript
   修改babel.config.js 加入@babel/preset-typescript

module.exports = {
   
  presets: [
    ['@babel/preset-env', {
   targets: {
   node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

安装ts-jest, jest 的 TypeScript 预处理器 yarn add --dev ts-jest

3. jest 配置文件 jest --init 初始化配置 生成jest.config.ts文件

export default {
   
  // 不建议自动mock 可以手动mock 后面会有讲
  automock: false,
  // Automatically clear mock calls, instances, contexts and results before every test
  clearMocks: true,

  // 测试覆盖率
  collectCoverage: true,

  // 测试覆盖率收集来源
  collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx', '!**/node_modules/**'],

  // 测试覆盖率生成的目录文件
  coverageDirectory: 'coverage',
  
  // Indicates which provider should be used to instrument code for coverage
  coverageProvider: 'babel',
  // babel不支持的一些文件 例如图片 css/scss 模块的映射
  moduleNameMapper: {
   
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico)$':
      '<rootDir>/__mocks__/fileMock.js',  // 新建__mocks__/fileMock.js
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy', //className查找都会原样返回 要安装identity-obj-proxy
  },

  // Use this configuration option to add custom reporters to Jest
  reporters: [
    'default',
    [
      'jest-sonar',
      {
   
        outputDirectory: './coverage', // 在这个文件夹下面
        outputName: 'test-report.xml', // 最后生成文件名字
        reportedFilePath: 'relative', // 相对路径
      },
    ],
  ],
  // A list of paths to modules that run some code to configure or set up the testing framework before each test
  setupFilesAfterEnv: ['<rootDir>/setupTest.ts'],

  // The test environment that will be used for testing
  testEnvironment: 'jsdom',  // js测试环境  要安装 jest-environment-jsdom

  
  // A map from regular expressions to paths to transformers
  transform: {
   
    '^.+\\.(js|jsx)$': ['babel-jest'],
    '^.+\\.(ts|tsx)$': ['ts-jest'],
  },

  // 转换器要忽略的路径
  transformIgnorePatterns: ['[/\\\\]node_modules/(?!(antd)/)[/\\\\].+\\.(js|jsx|ts|tsx)$'],
};

• 安装 jest-environment-jsdom yarn add --dev jest-environment-jsdom 提供js dom测试环境
• 为了识别 scss/css文件 要安装identity-obj-proxy yarn add --dev identity-obj-proxy className查找都会原样返回
• 为了识别图片等文档，需要把他们映射到指定文件 fileMock.js

export default 'test-file-stub';

在packgage.json script里面加test:jest --coverage 运行yarn test 会自动测试，测试完成生成测试覆盖率，以及测试报告在coverage/icov-report/index.html文件里面

install testing-library/react

yarn add --dev @testing-library/react @testing-library/jest-dom @testing-library/react-hooks @testing-library/user-event

• @testing-library/react : 以用户为中心的方式测试 UI 组件。
• @testing-library/jest-dom 好用的自定义 jest 匹配器来测试 DOM 的状态
• @testing-library/react-hooks 测试react hook
• @testing-library/user-event 测试交互事件
  根目录 新建setupTest.ts文件 默认启动导入 @testing-library/jest-dom，避免在每个文件单独写

import '@testing-library/jest-dom';

install eslint-plugin-testing-library

yarn add --dev eslint-plugin-testing-library
</