React测试驱动开发 - 环境搭建

工欲善其事，必先利其器

久等了，本篇讲一下React项目测试环境搭建。

工具集

名称	作用
jest	测试框架
testing-library	测试工具包
msw	mock接口请求

当然也会有一些其它可选的工具，如使用mocha代替jest，使用test-cafe、cypress等代替testing-library。这些随个人喜好可以调整。

下面分别介绍下三类工程的测试环境搭建：create-react-app、next.js、umijs。

在Create-React-App 工程中搭建测试环境

create-react-app中内置了测试功能，开箱即用。

首先使用create-react-app命令初始化一个工程：

npx create-react-app with-cra

执行这个命令之后，就会得到一个名为with-cra的工程了。

最新版本的create-react-app中已经内置了测试套件，所以现在已经可以执行npm test命令了。

看看它默认生成的测试文件：

1import { render, screen } from '@testing-library/react';
2import App from './App';
3
4test('renders learn react link', () => {
5  render(<App />);
6  const linkElement = screen.getByText(/learn react/i);
7  expect(linkElement).toBeInTheDocument();
8});

执行npm test可以看到如下的输出：

在Next.js工程中搭建测试环境

Next.js中并没有默认提供test套件，需要新建工程之后手动配置。

新建工程

执行 npx create-next-app with-nextjs命令，新建一个名为with-nextjs的Next.js工程。

此时执行npm test可以看到Error: no test specified的报错，因为它默认没有配置test套件。

安装&配置测试套件

首先，使用npm安装相关依赖：

1npm install --save-dev @testing-library/react jest @testing-library/jest-dom identity-obj-proxy

然后再加入以下的配置：

Package.json配置

package.json文件中，在"scripts"段中新增如下行：

1{
2  "scripts": {
3    "test": "jest"
4  }
5}

Babel配置

添加.babelrc配置文件，内容如下：

1{
2  "presets": ["next/babel"]
3}

Jest配置

添加jest.config.json配置文件，内容如下：

1{
2  "moduleNameMapper": {
3    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
4  },
5  "testEnvironment": "jsdom"
6}

添加测试文件

在pages/index.js同目录下，建立一个新文件index.spec.js，并添加如下的内容：

1import { render, screen } from '@testing-library/react';
2import '@testing-library/jest-dom'
3import Home from './index'
4
5test('renders get started', async () => {
6  render(<Home />);
7  const greetingElement = screen.getByText('Get started by editing');
8  expect(greetingElement).toBeInTheDocument();
9})

执行测试

运行npm test，可以看到类似如下的输出，代表测试套件配置完成。

1> with-nextjs@0.1.0 test /Users/yudu/dev/banyudu/react-test-examples/examples/with-nextjs
2> jest
3
4 PASS  pages/index.spec.js
5  ✓ renders get started (43 ms)
6
7Test Suites: 1 passed, 1 total
8Tests:       1 passed, 1 total
9Snapshots:   0 total
10Time:        1.112 s, estimated 2 s

在Umi.js工程中搭建测试环境

umi.js中也内置了测试功能，但不如CRA的好用，需要额外设置一下。

搭建一个umijs的工程

1mkdir with-umi
2cd with-umi
3npx @umijs/create-umi-app
4npm i

安装相关依赖

1npm install --save-dev @testing-library/react @testing-library/jest-dom babel-jest @babel/preset-react @babel/preset-env

添加Babel配置

1{
2  "presets": ["@babel/preset-env", ["@babel/preset-react", {
3    "runtime": "automatic"
4  }]]
5}

添加Jest配置

修改package.json文件，添加jest相关配置：

1{
2  "jest": {
3    "moduleNameMapper": {
4      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
5    },
6    "transform": {
7      "\\.[jt]sx?$": "babel-jest"
8    },
9    "testEnvironment": "jsdom"
10  }
11}

注意这里因为umi-test没有读取jest.config.json，而是读取的package.json中的jestkey，所以不能把jest的配置独立提取成配置文件。

添加测试文件

1import { render, screen } from '@testing-library/react';
2import '@testing-library/jest-dom'
3import Home from './index'
4
5test('renders Page index', async () => {
6  render(<Home />);
7  const greetingElement = screen.getByText('Page index');
8  expect(greetingElement).toBeInTheDocument();
9})

执行测试

执行测试，得到如下输出：

1➜  with-umi git:(main) npm test
2
3> @ test /Users/yudu/dev/banyudu/react-test-examples/examples/with-umi
4> umi-test
5
6 PASS  src/pages/index.spec.tsx
7  ✓ renders Page index (25 ms)
8
9Test Suites: 1 passed, 1 total
10Tests:       1 passed, 1 total
11Snapshots:   0 total
12Time:        3.83 s
13Ran all test suites.

说明测试套件搭建成功。

总结

以上就是针对三种脚手架项目（create-react-app、next.js、umi.js）的测试套件搭建说明。相关的示例代码可以查阅Github项目。

下一期更新一些基础控件的测试套路，敬请期待。