React应用测试：配置Typescript, Jest, ESLint | 创作者训练营为明年开一个好头，边实践边记

为明年开一个好头，边实践边记录，写个测试系列。

测试的目标为用Typescript写的React应用，测试框架主要是Jest。让我们从配置开始。

安装

在仓库中运行以下命令行安装：

npm i --save-dev typescript jest @types/jest ts-jest

注意在写这篇的时候jest已发布版本27，但ts-jest和@types/jest尚未支持27，所以你可能需要安装26来避免一些奇怪的问题:

npm i --save-dev typescript jest@^26.6.3 @types/jest ts-jest

配置Typescript

安装完后，在package.json边上创建一个tsconfig.json文件配置Typescript。如：

{
  "compilerOptions": {
    "module": "es2020",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
  },
  "include": ["src"]
}

注意的是：

include必须包含test文件的路径，否则无法解析。我个人喜欢直接将测试放在src/内源文件旁边，所以只配置了src/文件夹。
moduleResolution必须为node，因为Jest是在NodeJS上跑。
一般用了打包工具的可以将target根据你的Node版本设置新一些的ES版本，稍稍减少解析转化的时间，打包工具会用它们自己的设置覆盖不太受影响。另外，根据设置的target，ts会自动添加一些相应的lib配置，如ES6会添加DOM,ES6,DOM.Iterable,ScriptHost。

配置Jest

在package.json边上创建一个jest.config.js文件，添加内容：

module.exports = {
  preset: 'ts-jest'
}

非常简短有没有？后续会根据情况增加哦！

配置ESLint

如果项目配置了ESLint，那还需要多几步避免它报错。首先安装必须的插件：

npm i --save-dev eslint-plugin-jest eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

然后，确保.eslintrc.js有添加以下配置：

{
  extends: [
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['@typescript-eslint', 'jest', 'react'],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    'jest/globals': true,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}

写个简单的测试跑跑看

在src下创建index.test.ts:

const foo = (input: boolean) => input;

describe('First test', () => {
  test('can work', () => {
    expect(foo(true)).toBeTruthy();
  });
});

在命令行中键入npx jest回车。测试顺利可以看到如下打印内容：

 PASS  test/index.test.ts
  First test
    ✓ can work (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.607 s, estimated 3 s

看看其他测试系列文：

加我微信

文章标题XXX | 创作者训练营征文活动正在进行中......