读书笔记《hands-on-full-stack-development-with-spring-boot-2-0-and-react》测试您的前端

Chapter 12. Testing Your Frontend

本章解释了测试 React 应用程序的基础知识。我们将概述使用 Jest，它是 Facebook 开发的 JavaScript 测试库。我们还将介绍 Enzyme，这是一个由 Airbnb 开发的 React 测试实用程序。我们将研究如何创建新的测试套件和测试。我们还将介绍如何运行测试并发现测试结果。

在本章中，我们将看到以下内容：

The basics of Jest
How to create new test suites and tests
The basics of the Enzyme test utility
How to install Enzyme
How to create tests with Enzyme

Technical requirements

我们在第 4 章中创建的 Spring Boot 应用程序，保护和测试您的后端< /em>，需要（GitHub：https://github.com/PacktPublishing/Hands-On-Full-Stack-Development-with-Spring-Boot-2.0-and-React /tree/master/Chapter%204）。

我们还需要我们在上一章中使用的 React 应用程序（GitHub：https://github.com/PacktPublishing/Hands-On-Full-Stack-Development-with-Spring-Boot-2.0-和-React/tree/master/Chapter%2011）。

Using Jest

Jest 是一个 JavaScript 测试库，由 Facebook (https://facebook .github.io/jest/en/）。 Jest 与 React 一起广泛使用，它提供了许多有用的测试功能。您可以创建一个快照测试，您可以从 React 树中获取快照并调查状态如何变化。 Jest 还具有可用于测试的模拟功能，例如，您的异步 REST API 调用。 Jest 还提供了测试用例中的断言所需的函数。

我们将首先了解如何为一个基本的 JavaScript 函数创建一个简单的测试用例，该函数执行一些简单的计算。以下函数获取两个数字作为参数并返回数字的乘积：

// multi.js
export const calcMulti = (x, y) => {
    x * y;
}

以下代码显示了对上述函数的 Jest 测试。测试用例以运行测试用例的 test 方法开始。 test 方法有一个别名，称为 it，我们稍后会在 React 示例中使用它。测试方法获取两个必需的参数——测试名称和包含测试的函数。 expect 用于测试值。 toBe 就是所谓的匹配器，它检查函数的结果是否等于匹配器中的值。 Jest 中有许多不同的匹配器，您可以从他们的文档中找到这些：

// multi.test.js
import {calcMulti} from './multi';

test('2 * 3 equals 6', () => {
  expect(calcMulti(2, 3)).toBe(6);
});

Jest 带有 create-react-app，因此我们无需进行任何安装或配置即可开始测试。建议为您的测试文件创建一个名为 _test_ 的文件夹。测试文件应具有 .test.js 扩展名。如果你在 VS Code 文件资源管理器中查看你的 React 前端，你可以看到在 src 文件夹中，已经自动创建了一个测试文件，它被称为 App.test.js:

读书笔记《hands-on-full-stack-development-with-spring-boot-2-0-and-react》测试您的前端

测试文件源代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

下面的测试文件在 DOM 中创建了一个 div 元素并将 App 组件安装到它上面。最后，组件从 div 中卸载。因此，它只是测试您的 App 组件是否可以呈现以及 test 跑步者正在工作。 it 是 的别名 Jest 中的 test 函数，第一个参数是测试的名称，第二个参数是执行和测试的函数。

您可以通过在终端中键入以下命令来运行测试：

npm test

或者，如果您使用的是 Yarn，请输入以下内容：

yarn test

执行完测试并且一切正常后，您将在终端中看到以下信息：

Snapshot testing

快照测试是一种有用的工具，可以测试您的用户界面中没有不需要的更改。 Jest 在执行快照测试时生成快照文件。下次执行测试时，会将新的 snapshot 与前一个进行比较。如果文件内容之间发生变化，则测试用例失败并在终端中显示错误消息。

要开始快照测试，请执行以下步骤：

Install the react-test-render package. The --save-dev parameter means that this dependency is saved to the package.json file's devDependencies part and it is only used for development purposes. If you type the npm install --production command in the installation phase, dependencies in the devDependencies part are not installed. So, all dependencies that are needed only in the development phase should be installed using the --save-dev parameter:

npm install react-test-renderer --save-dev

Your package.json file should look the following, and the new devDependecies part have been added to the file:

{
  "name": "carfront",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^1.0.0",
    "@material-ui/icons": "^1.0.0",
    "material-ui": "^0.20.1",
    "react": "^16.3.2",
    "react-confirm-alert": "^2.0.2",
    "react-csv": "^1.0.14",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4",
    "react-skylight": "^0.5.1",
    "react-table": "^6.8.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-test-renderer": "^16.3.2"
  }
}

Import renderer to your test file:

import renderer from 'react-test-renderer';

让我们在 App.test.js 文件中添加一个新的快照测试用例。测试用例将创建 AddCar 组件的快照测试：

Import the AddCar component to our test file:

import AddCar from './components/AddCar';

Add following test code after the first test case, which already exists in the file. The test case takes a snapshot from our App component and then compares whether the snapshot differs from the previous snapshot:

it('renders a snapshot', () => {
  const tree = renderer.create(<AddCar/>).toJSON();
  expect(tree).toMatchSnapshot();
});

Run the test cases again by typing the following command into your terminal:

npm test

Now you can see the following message in the terminal. The test suite tells us the number of test files, and the tests tell us the number of test cases:

第一次执行测试时，会创建一个 _snapshots_ 文件夹。此文件夹包含从测试用例生成的所有快照文件。现在，您可以看到生成了一个快照文件，如下图所示：

快照文件现在包含 AddCar 组件的 React 树。您可以在此处看到 from 开头的部分快照文件：

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders a snapshot 1`] = `
<div>
  <section className="skylight-wrapper " >
    <div className="skylight-overlay" onClick={[Function]} style={ Object { "backgroundColor": "rgba(0,0,0,0.3)", "display": "none", "height": "100%", "left": "0px", "position": "fixed", "top": "0px", "transitionDuration": "200ms", "transitionProperty": "all", "transitionTimingFunction": "ease", "width": "100%", "zIndex": "99", } } />
...continue

Using Enzyme

Enzyme 是一个 JavaScript 库，用于测试 React 组件的输出，由 Airbnb 开发。 Enzyme 有一个非常好的 DOM 操作和遍历 API。如果你用过 jQuery，那么理解 Enzyme API 的思想真的是easy。

要开始使用 Enzyme，请执行以下步骤：

Install it by typing the following command into your terminal. This will install the enzyme library and the adapter library for React version 16. There is an adapter available for older React versions:

npm install enzyme enzyme-adapter-react-16 --save-dev

Create a new test file (test suite) called AddCar.test.js in the src folder. Now we are going to create an Enzyme shallow-rendering test for our AddCar component. The first test case renders the component and checks that there are five TextInput components, as there should be. wrapper.find finds every node in the render tree that matches TextInput. With Enzyme tests, we can use Jest for assertions and here we are using toHaveLength to check that the found node count equals five. Shallow rendering tests the component as a unit and does not render any child components. For this case, shallow rendering is enough. Otherwise you can also use the full DOM rendering by using mount:

import React from 'react';
import AddCar from './components/AddCar';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

describe('<AddCar />', () => {
  it('renders five <TextInput /> components', () => {
    const wrapper = shallow(<AddCar />);
    expect(wrapper.find('TextField')).toHaveLength(5);
  });
});

Now, if you run the tests, you can see the following message in the terminal. You can also see that the number of test suites is two because the new test file and all tests passed:

您还可以使用 simulate 方法使用 Enzyme 测试事件。以下示例展示了如何在 AddCar< 中测试 TextField 品牌的 onChange 事件/代码>组件。这个例子还展示了如何访问组件的状态。我们首先使用 wrapper.find 找到第一个 TextField ，用于汽车品牌。然后，我们设置 TextField 的值，并使用 simulate 方法来模拟 change 事件。最后，我们检查现在应该包含 Ford 的品牌状态的值：

describe('<AddCar />', () => {
  it('test onChange', () => {
    const wrapper = shallow(<AddCar />);
    const brandInput = wrapper.find('TextField').get(0);
    brandInput.instance().value = 'Ford';
    usernameInput.simulate('change');
    expect(wrapper.state('brand')).toEqual('Ford');
  });
});

Summary

在本章中，我们对如何测试 React 应用程序进行了基本概述。 Jest 是 Facebook 开发的一个测试库，它已经在我们的前端可用，因为我们使用 create-react-app 创建了我们的应用程序。我们使用 Jest 创建了几个测试，并运行了这些测试以查看如何检查测试结果。我们安装了 Enzyme，它是 React 的一个测试工具。使用 Enzyme，您可以轻松测试您的 React 组件渲染和事件。在下一章中，我们将保护我们的应用程序，并将登录功能添加到前端。

Questions

What is Jest?
How should you create test cases using Jest?
How should you create a snapshot test using Jest?
What is Enzyme?
How should you install Enzyme?
How should you test rendering with Enzyme?
How should you test events with Enzyme?

vlambda博客
学习文章列表