Jest + React Testing Library使用指南（支持TS）(一)使用Jest + React Test

快速开始

安装依赖

为什么是用ts-jest而不是用babel来处理TS?
注意这里对ts的支持使用了ts-jest，比起使用babel，除了减少构建步骤，对jest进行了更好的集成和需要更少的配置之外，ts-test在显示错误报告时，会显示原始的TS代码，而非babel转换后的js代码，这对调试非常有帮助。
为什么是React Testing Library?
与其他测试工具相比，React Testing Library更注重于测试的用户行为和交互，而不是组件的内部实现细节。这让我们在修改业务代码后不必修改测试代码，提升开发效率。

npm install --save-dev jest typescript ts-jest @types/jest @testing-library/react @testing-library/dom @types/react @types/react-dom jest-environment-jsdom

在package.json配置

{
  "scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage"
  }
}

新建jest.config.js并粘贴如下内容

/**
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

/** @type {import('jest').Config} */
const config = {
  // 每次测试前自动清除mock calls, instances, contexts和results
  clearMocks: true,
  // 指示应该使用哪个提供程序来对代码进行覆盖测试。允许的值为“babel”（默认值）或“v8”。
  coverageProvider: "v8",
  // web应用使用jsdom node应用使用node
  testEnvironment: "jsdom",
  // ts tsx文件使用ts-jest测试
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  /* 这个正则表达式可以匹配以下类型的文件：
   * 位于 /tests/ 目录下的任何 .js, .jsx, .ts, 或 .tsx 文件。
   * 包含 "test" 或 "spec" 字符串的任何 .js, .jsx, .ts, 或 .tsx 文件，无论它们位于哪个目录下。
   */
  testRegex: '(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
  // 如果引用文件没有指定扩展名，会从左往右尝试加上如下后缀匹配
  moduleFileExtensions: ['tsx', 'ts', 'js', 'jsx', 'json', 'node'],
  // 处理路径别名 https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping/
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
    "^@packages/(.*)$": "<rootDir>/packages/$1",
  },
};

module.exports = config;

如果配置完后路径依旧无法识别的话，可以重启内置插件。
其他配置的详细信息可以点这里查看

在tsconfig.json中加上如下配置

{
  "compilerOptions": {
    "types": ["jest"]
  }
}

验证

在tests文件夹下新建a.ts并粘贴如下内容

test('1 + 1 = 2', () => {
  expect(1 + 1).toBe(2);
});

在命令行跑npm run test

如果出现如下内容说明完成了所有的配置 PASS tests/a.ts √ 1 + 1 = 2 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.478 s, estimated 5 s
Ran all test suites.