jest测试react组件_用Jest为React组件编写快照测试

jest测试react组件

In this tutorial, we will be looking at what snapshot tests are and how we can use snapshot testing to ensure our User Interface does not change without the team knowing about it.

在本教程中，我们将研究什么是快照测试，以及如何使用快照测试来确保我们的用户界面在团队不了解的情况下不会更改。

To get started, you will need to familiarize yourself with the following

首先，您需要熟悉以下内容

1. NodeJS - A JavaScript runtime built on Chrome's V8 JavaScript engine.
   NodeJS-基于Chrome的V8 JavaScript引擎构建JavaScript运行时。
2. React - A JavaScript library for building delightful UI by Facebook
   React-一个用于通过Facebook构建令人愉悦的UIJavaScript库
3. Jest - A JavaScript testing framework by Facebook.
   Jest -FacebookJavaScript测试框架。

什么是快照测试？ ( What Is Snapshot Testing? )

Unlike strict Test Driven Development where the standard practice is to write failing tests first then write the code to make the tests pass, Snapshot testing takes a different approach.

与严格的“测试驱动开发”不同，在标准实践中，标准做法是先编写失败的测试，然后编写代码以使测试通过，而Snapshot测试则采用另一种方法。

To write a snapshot test, you first get your code working, say, a React component, then generate a snapshot of it's expected output given certain data. The snapshot tests are commited alongside the component and everytime the tests are run. Jest will compare the snapshot to the rendered output for the test.

要编写快照测试，您首先要使代码工作，例如React组件，然后在给定某些数据的情况下为其预期输出生成快照。 快照测试与组件一起提交，并且每次运行时都会提交。 Jest将快照与测试的渲染输出进行比较。

If the test does not pass, it may mean that there were some unexpected changes on the component that you need to fix, or you made some changes to the component and it's about time you updated the snapshot tests.

如果测试未通过，则可能意味着您需要修复该组件上的某些意外更改，或者对该组件进行了一些更改，现在该更新快照测试了。

Snapshot testing is meant to be one of many different testing tools. Therefore, you may still need to write tests for your actions and reducers.

快照测试旨在成为许多不同的测试工具之一。 因此，您可能仍需要为操作和减速器编写测试。

Let's get right into it!

让我们开始吧！

创建一个简单的React组件 ( Creating a Simple React Component )

To get started, we will create a simple React App using Create React App.

首先，我们将使用Create React App创建一个简单的React App 。

create-react-app ooh-snapcd ooh-snap
yarn start

We should now have a React app! Let's go ahead and create a component that we can test. The component that we are going to be creating renders the items props it receives as either a list or as a span element depending on the number of items.

我们现在应该有一个React应用程序！ 让我们继续创建一个可以测试的组件。 我们将要创建的组件根据项目的数量将其接收的items道具渲染为列表或span元素。

Create a Components folder then add the following Items component

创建一个Components文件夹，然后添加以下Items组件

import React from 'react';
import PropTypes from 'prop-types';

/**
 * Render a list of items
 *
 * @param {Object} props - List of items
 */
function Items(props) {
     
  const