ReactJS - 测试

测试是确保任何应用程序中创建的功能是否符合业务逻辑和编码规范的过程之一。React 建议使用 React 测试库 来测试 React 组件，并使用 jest 测试运行器来运行测试。react-testing-library 允许隔离检查组件。

可以使用以下命令在应用程序中安装它：

npm install --save @testing-library/react @testing-library/jest-dom

创建 React 应用

创建 React 应用 默认配置了 React 测试库 和 jest 测试运行器。因此，测试使用 创建 React 应用 创建的 React 应用程序只需一个命令即可。

cd /go/to/react/application 
npm test

npm test 命令类似于 npm build 命令。两者都会在开发者更改代码时重新编译。一旦在命令提示符中执行该命令，它就会发出以下问题。

No tests found related to files changed since last commit.
Press `a` to run all tests, or run Jest with `--watchAll`.

Watch Usage
   › Press a to run all tests.
   › Press f to run only failed tests.
   › Press q to quit watch mode.
   › Press p to filter by a filename regex pattern.
   › Press t to filter by a test name regex pattern.
   › Press Enter to trigger a test run.

按下 a 将尝试运行所有测试脚本，最后总结结果，如下所示：

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

Watch Usage: Press w to show more.

在自定义应用程序中进行测试

在本节中，让我们使用 Rollup 捆绑器 编写一个自定义 React 应用程序，并使用 React 测试库 和 jest 测试运行器对其进行测试。

首先，按照“创建 React 应用”章节中的说明，使用 Rollup 捆绑器创建一个新的 React 应用程序 react-test-app。

接下来，安装测试库。

cd /go/to/react-test-app 
npm install --save @testing-library/react @testing-library/jest-dom

接下来，在您喜欢的编辑器中打开应用程序。

接下来，在 src/components 文件夹下创建一个文件 HelloWorld.test.js 来编写 HelloWorld 组件的测试并开始编辑。

接下来，导入 React 库。

import React from 'react';

接下来，导入测试库。

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

接下来，导入我们的 HelloWorld 组件。

import HelloWorld from './HelloWorld';

接下来，编写一个测试来检查文档中是否存在 Hello World 文本。

test('test scenario 1', () => {
   render(<HelloWorld />);
   const element = screen.getByText(/Hello World/i);
   expect(element).toBeInTheDocument();
});

完整的测试代码如下：

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import HelloWorld from './HelloWorld';

test('test scenario 1', () => {
   render(<HelloWorld />);
   const element = screen.getByText(/Hello World/i);
   expect(element).toBeInTheDocument();
});

接下来，如果系统中尚未安装 jest 测试运行器，请安装它。

npm install jest -g

接下来，在应用程序的根文件夹中运行 jest 命令。

jest

接下来，在应用程序的根文件夹中运行 jest 命令。

PASS  src/components/HelloWorld.test.js
   √ test scenario 1 (29 ms)

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

打印页面