在《使用Webpack等搭建一个适用于React项目的脚手架（2 - React Router、Redux、Sass）》中记录了在项目中使用React-Router、Redux和Sass，以及引入图片。这篇文章主要记录在项目中使用Eslint检查代码风格以及使用Jest等进行单元测试。

使用Eslint

Eslint是用来让代码风格保持一致以及减少错误发生的。

Eslint官网推荐React检查使用eslint-plugin-react。

从这篇官方文档中得知，需要使用@typescript-eslint/parser进行TypeScript检查。在@typescript-eslint/parser的Github仓库中找到检查TypeScript的方法。

本文按照上面提到的这些参考路径进行Eslint配置。（其实在安装好eslint之后，可以用npx eslint --init创建一个配置。执行npx eslint --init后会有一些提问，Eslint会根据回答创建配置文件并安装依赖。）

首先安装依赖：

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

创建配置文件：touch .eslintrc.js。.eslintrc.js文件内容如下：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
  ],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: [
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended'
      ],
      parser: '@typescript-eslint/parser',
      plugins: [
        '@typescript-eslint/eslint-plugin',
      ],
      rules: {
        '@typescript-eslint/ban-ts-ignore': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-use-before-define': 'off'
      },
    }
  ],
  settings: {
    react: {
      version: 'detect',
    }
  },
  rules: {
    'react/jsx-no-undef': 'off'
  },
  env: {
    browser: true,
    es2020: true,
    node: true,
    commonjs: true,
  },
  globals: {
    React: true,
    ReduxConnect: true,
    Axios: true,
    UseEffect: true,
  },
  ignorePatterns: ['dist/'],
}

eslint:recommended表示启用Eslint推荐规则，plugin:react/recommended启用React推荐规则。

在overrides中进行配置，只对.ts文件和.tsx文件进行TypeScript相关的处理，比如只对.ts、.tsx文件使用@typescript-eslint/parser处理器。

设置react: { version: 'detect' }表示自动设置检查的React版本是安装的React的版本。

在env中的配置表示支持browser、es2020、node、commonjs中预定义的全局变量。

在globals中配置之前的步骤中设置的全局变量，比如React。

ignorePatterns配置忽略的文件，数组的每一个元素相当于.eslintignore中的一行，.eslintignore能覆盖ignorePatterns的配置。Eslint默认会忽略/node_modules/* 和 /bower_components/*文件目录，所以没在ignorePatterns中添加这两个目录。

根据需要关掉了几条规则：

1.关掉在React中不允许未声明变量的规则，因为我们全局设置了React变量，但是Eslint会报错error 'React' is not defined react/jsx-no-undef，所以把这个规则关掉。

'react/jsx-no-undef': 'off'

2.关掉不能在声明前使用的规则，还是因为已经在Webpack中定义了全局变量React，但是Eslint无法进行判断，所以会报错'React' was used before it was defined。

'@typescript-eslint/no-use-before-define': 'off'

3.关掉不能使用// @ts-ignore的规则：

'@typescript-eslint/ban-ts-ignore': 'off',

4.关掉不能使用any定义类型的规则（当然尽量不要使用any定义类型）：

'@typescript-eslint/no-explicit-any': 'off',

在package.json中添加：

  "scripts": {
  	...
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },

执行npm run lint，会看见检查的结果，根据提示调整代码。

在Webpack（config/webpack.dev.js）中配置如下，表示在对.js、.jsx、.ts、.tsx文件进行处理前先使用eslint-loader对文件进行Eslint检查。

    {
      enforce: 'pre',
      test: /(\.js(x?))|(\.ts(x?))$/,
      exclude: /[\\/]node_modules[\\/]/,
      loader: 'eslint-loader',
    },

执行npm start启动webpack-dev-server，当文件修改并保存之后会重新打包，在打包前会进行Eslint检查，可以根据检查结果进行代码调整。

使用Jest

Jest是一个专注于简化的JavaScript测试框架。本文参考Jest官方文档--使用React、react-testing-library--基础例子进行了简单的DOM测试。React Redux测试和React Router测试等可以查看react-testing-library--更多例子。

安装依赖：

npm i --save-dev jest @testing-library/react

根据Jest官方文档--使用Babel的内容，安装Jest的时候自动安装了babel-jest，babel-jest会根据babel配置自动转换文件，（《使用Webpack等搭建一个适用于React项目的脚手架（1 - React、TypeScript）》中已经在.babelrc.js中进行了babel配置，所以这里不用再考虑如何处理tsx文件）。

在项目根目录创建一个__tests__文件夹。__tests__文件夹下包含测试文件，创建了3个文件夹分别表示测试组件、测试页面、测试函数。

├── __tests__
│   ├── components
│   ├── functions
│   └── pages
│       └── Novel.test.tsx

如果要对__tests__文件夹中的内容进行类型检查，需要安装jest类型定义包，并且在tsconfig.json文件夹中引入__tests__文件夹。

npm i --save-dev @types/jest

在tsconfig.json的include中添加上__tests__目录：

	...
  "include": [
    ...
    "__tests__/*",
    "__tests__/**/*",
  ]
}

1.写一个例子

调整src/pages/Novel/Novel.tsx文件内容如下：

export default function Novel(): JSX.Element {
  const [ novels, setNovels ] = UseState(['一号小说', '二号小说']);
  function deleteNovel (index): void {
    if (!novels[index]) return;
    const nextNovels = [...novels];
    nextNovels.splice(index, 1);
    setNovels(nextNovels);
  }
  return (
    <div>
      <ul>
        {novels.map((novel, index) => {
          return <li key={index} onClick={deleteNovel.bind(this, index)} style={{ cursor: 'pointer' }}>{novel}</li>;
        })}
      </ul>
    </div>
  );
}

组件渲染小说列表，点击某选项就删除该选项。比如点击渲染出的<li>一号小说</li>，<li>一号小说</li>就会被删除。

tests/pages/Novel.test.tsx文件内容如下：

import { render, fireEvent, screen } from '@testing-library/react';

import Novel from '@/pages/Novel/Novel.tsx';

test('novel item should not exist after deletion', () => {
  const novelName = '一号小说';
  render(<Novel />);

  expect(screen.queryByText(novelName)).toBeTruthy();

  fireEvent.click(screen.queryByText(novelName));

  expect(screen.queryByText(novelName)).toBeNull();
});

这个测试文件简单地测试以下内容：

组件渲染成DOM后，textContent为'一号小说'的元素（A元素）是存在的，点击A元素之后，DOM中就没有A元素了。

关于代码中用到的test、fireEvent等更详细的信息可以查看Jest官网--使用matchers、testing-library官网、firEvent模拟事件。

2.Jest配置

在前几篇文章的代码中，我们已经设置了React等全局变量，以及使用@作为src目录的路径别名。Jest中也需要做相应的配置，否则执行npx jest会报错。

在根目录下创建一个jest.config.js文件，用于进行jest配置。

touch jest.config.js

jest.config.js文件内容如下：

module.exports = {
  setupFiles: ['<rootDir>/__tests__/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  testPathIgnorePatterns: ['<rootDir>/__tests__/jest.setup.js', '/node_modules/']
}

（1）配置全局变量

jest配置中有一个globals属性用于配置全局变量，但是globals对象设置的对象必须是JSON可序列化的，而函数在使用JSON.stringify()转换的时候会被忽略，所以需要使用setupFiles属性。<rootDir>是jest配置文件所在的文件目录。

jest.setup.js文件内容如下：

import React, { useState } from 'react';

global['React'] = React;
global['UseState'] = useState;

因为这里要测试的组件只用到的React和UseState，所以只配置了React和useState，需要用到别的全局变量时，可以按照相同的方法配置。

（2）配置路径别名

在moduleNameMapper属性中设置'^@/(.*)$': '<rootDir>/src/$1'用于配置路径别名，就像之前我们在Webpack和TypeScript中配置的那样，用@代表src目录。一开始我使用的是'^@(.*)$': '<rootDir>/src$1'，这样执行npx jest的时候会报错：

  ● Test suite failed to run

    Configuration error:
    
    Could not locate module @babel/code-frame mapped as:
    .../simple-scaffold02/src$1.

经过反复横跳检查，两边的正则表达式都是没错的，但是仔细观察报错信息，发现这样配置把@babel/code-frame引用也映射到src路径下了，然而src路径下是没有babel/code-frame的，自然报错了。所以需要以加一根斜杠的方式匹配路径'^@/(.*)$': '<rootDir>/src/$1'。

（3）设置忽略文件

Jest默认会将匹配正则表达式(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$的文件作为测试文件，前面的jest.setup.js文件是放在__tests__文件夹中的，但它是用来设置全局变量的，并不是测试文件。所以需要在testPathIgnorePatterns中配置忽略它。

（4）Webpack和TypeScript新增配置。

因为新增了一个全局变量UseState代表React的useState模块，所以在Webpack和TypeScript中也需要加上这个全局变量：

config/webpack.common.js：

    new webpack.ProvidePlugin({
    	...
      UseState: ['react', 'useState'],
    }),

typings/react.d.ts：

import React, { useEffect, useState } from 'react';

declare global {
	...
  const UseState: typeof useState;
}

（5）修改package.json：

  "scripts": {
  	...
    "test": "jest"
  },

执行npm run test执行测试用例，得到结果：

> jest

 PASS  __tests__/pages/Novel.test.tsx
  ✓ novel item should not exist after deletion (33ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.241s

（6）检查代码风格是否统一

执行npm run lint进行检查，发现因为新创建的jest.setup.js文件中的import React, { useState } from 'react';造成了一个报错：

error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module

只有配置了sourceType: module才能使用import和export。之前的代码中也用了import，但因为是在ts文件和tsx文件中，所以eslint没有报这个错。

在**.eslintrc.js**中添加上以下内容即可：

module.exports = {
	...
  parserOptions: {
    sourceType: 'module',
  },
}

其他

1.根据需要忽略不想使用git上传的文件

touch .gitignore

文件内容如下：

.DS_Store
.vscode

dist
node_modules

比较全的gitignore配置可以参考gitignore例子合集。

2.创建README.md

# npm start
  start up project.
# npm run build
  build for production environment.
# npm run buid:dev
  build for development environment.
# npm run lint
  use elint to find problems in code.
# npm run test
  user jest to test code.

下一篇：《使用Webpack等搭建一个适用于React项目的脚手架（4 - 优化）》