react测试_React测试

react测试

When learning to program, most people begin using the behavior driven development approach which is writing code to meet a functionality or observable behavior. However, behavior driven development, also referred to as BDD, derived from TDD or test driven development. TDD focuses on units of software, where tests are written for those units to ensure that the units function as they should. In React, these units could be represented by components where tests are written to check that the component behaves in a certain way otherwise failing the unit test.

在学习编程时，大多数人开始使用行为驱动的开发方法，该方法正在编写满足功能或可观察到的行为的代码。 但是，行为驱动的开发(也称为BDD)源自TDD或测试驱动的开发。 TDD专注于软件单元，在其中为这些单元编写测试以确保这些单元按其应有的功能运行。 在React中，这些单元可以用组件表示，在该组件中编写测试以检查组件是否以某种方式运行，否则将导致单元测试失败。

The importance of testing are plenty. For example, it ensures that changes introduced to an application whether by refactors or new features does not negatively impact the existing application. Implementing testing in React involves utilizing a test runner which is the library that provides the code for testing and also executes the tests. In addition, testing utilities aid TDD by providing simulations of the React application such as mounting of component and inspecting a components data.

测试的重要性很多。 例如，它确保通过重构或新功能引入应用程序的更改不会对现有应用程序产生负面影响。 在React中实现测试涉及利用测试运行器，该运行器是提供测试代码并执行测试的库。 此外，测试实用程序通过提供对React应用程序的仿真(如组件安装和检查组件数据)来帮助TDD。

By default, React includes the test runner library JEST as an application dependency when running create-react-app. JEST provides the language to write executable tests for the React application. React also uses testing utilities such as Enzyme which allows to write tests using JEST in a manner that simulates actual components and the data these components would be responsible for without actually having to work with them. As mentioned, to get started you don’t need to install the JEST testing library because it comes pre-installed with create-react-app. After that, all that needs to be installed are the following:

默认情况下，当运行create-react-app时，React会将测试运行程序库JEST包含为应用程序依赖项。 JEST提供了为React应用程序编写可执行测试的语言。 React还使用诸如Enzyme之类的测试实用程序，该实用程序允许使用JEST编写测试，从而模拟实际组件以及这些组件负责的数据，而无需实际使用它们。 如前所述，开始时您不需要安装JEST测试库，因为它已预先安装了create-react-app。 之后，所有需要安装的内容如下：

npm install --save enzyme react-test-renderer enzyme-adapter-react-16

Here we are installing enzyme, which is the testing utility, react-test-renderer, which is a dependency for enzyme and the enzyme-adapter-react-16 package which allow enzyme to connect to React. With these packages installed, you can begin to explore writing tests. First when testing components, you can create a file that’s named the same as the component file but with the file extension .test.js.

在这里，我们要安装酶(它是测试实用程序)，react-test-renderer(它是酶的依赖项)和酶-adapter-react-16软件包，它允许酶连接到React。 安装了这些软件包后，您就可以开始探索编写测试了。 首先，在测试组件时，可以创建一个名称与组件文件相同的文件，但文件扩展名为.test.js。

// Main component
src/components/Main/Main.js // unit test file
src/components/Main/Main.test.js

After this you need to import a few things from enzyme and the enzyme adapter to get things working properly with the React application. So:

之后，您需要从酶和酶适配器导入一些东西，以使它们在React应用程序中正常工作。 所以：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';configure({ adapter: new Adapter() });

So above you are essentially connecting enzyme to React and configuring it to work with React via the Adapter. Before you begin writing your tests, it’s important to know the sort of things to test. Some suggested applications for unit testing are testing components to see that they render the correct output such as conditional outputs or child components. Things that should not be tested are third party libraries and their complex connections such as an axios HTTP request to an API. With that, you can begin testing like so:

因此，在上文中，您基本上是在将酶连接到React并通过适配器将其配置为与React一起使用。 在开始编写测试之前，了解要测试的东西很重要。 一些建议的单元测试应用程序正在测试组件，以查看它们是否提供了正确的输出，例如条件输出或子组件。 不应测试的是第三方库及其复杂的连接，例如对API的axios HTTP请求。 这样，您就可以像这样开始测试了：

import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Main from './components/Main/Main;'
import SubMain from './components/SubMain/SubMain;'configure({ adapter: new Adapter() });describe('Main', () => {
  it('it should render two SubMain elements', () => {
    let wrapper = shallow(<Main />);    expect(wrapper.find(SubMain)).toHaveLength(2);
  });
});

Let’s break down what’s happening this time. We import React because we are going to work with the components that will be tested such as Main and SubMain, which are also imported. Next, the shallow function is imported from the enzyme package which allow the rendering of the component that will be tested, in this case Main. In addition, shallow creates a “shallow” wrapper around the component preventing the loading of its subtree such as the component’s child components and the child component’s child components and so on.

让我们分解一下这次发生的事情。 我们之所以导入React是因为我们要使用将要导入的要测试的组件(例如Main和SubMain)。 接下来，从酶包装中导入浅层函数，从而可以渲染将要测试的组件，在本例中为Main。 另外，shallow在组件周围创建一个“浅”包装，以防止加载其子树，如组件的子组件和子组件的子组件等。

After all this, we begin the unit test with the describe function which represents an entire unit test. It takes two arguments, the first being a string that will represent the component being tested. The second argument is a callback function that will contain the actual tests for the component which is carried out by the “it” function which also takes in two arguments. The first argument is a string statement for what the test is looking for, so in this example, ‘Main’ is being tested and ‘it should render two SubMain elements.’ And the second argument is a callback which contains the code that carries out the test. In this example, we first create the shallow representation of the component being tested. The convention for this is creating a variable called wrapper which is assigned to the call to the shallow function, passing in the Main component in the standard JSX notation. You can look at the documentation for enzyme which will provide more detail about this concept of shallow rendering a component. https://enzymejs.github.io/enzyme/docs/api/shallow.html

在完成所有这些之后，我们从带有表示整个单元测试的describe函数开始单元测试。 它有两个参数，第一个是代表要测试的组件的字符串。 第二个参数是一个回调函数，它将包含由“ it”函数执行的组件的实际测试，该函数也接受两个参数。 第一个参数是测试要查找的字符串语句，因此在此示例中，正在测试“ Main”，并且“它应呈现两个SubMain元素”。 第二个参数是一个回调，其中包含执行测试的代码。 在此示例中，我们首先创建要测试的组件的浅表形式。 这样做的惯例是创建一个称为包装器的变量，该变量被分配给浅函数的调用，并以标准JSX表示法传入Main组件。 您可以查看酶的文档，该文档将提供有关浅渲染组件概念的更多详细信息。 https://enzymejs.github.io/enzyme/docs/api/shallow.html

Next, we use the expect function which is provided by the JEST library, to test some expectation for the shallow representation of the Main component. In this case, when we invoke the find method on wrapper, checking to find the SubMain component as its child component. After that, we not only expect to find a SubMain component but for the result of that find call to produce two SubMain components found via the toHaveLength(2). Another thing to note is that when passing the SubMain component to the find method, we do not use the JSX notation like we did when creating the shallow representation of the Main component.

接下来，我们使用JEST库提供的Expect函数来测试对Main组件的浅层表示的期望。 在这种情况下，当我们在包装器上调用find方法时，检查以查找SubMain组件作为其子组件。 此后，我们不仅希望找到一个SubMain组件，而且还要为该find调用的结果生成通过toHaveLength(2)找到的两个SubMain组件。 还要注意的另一件事是，当将SubMain组件传递给find方法时，我们不像创建Main组件的浅层表示时那样使用JSX表示法。

With all that, you have written a simple test for a component, testing that it does its job in rendering two components. To execute this test, you simply run:

有了所有这些，您就为组件编写了一个简单的测试，测试该组件是否在渲染两个组件时发挥了作用。 要执行此测试，只需运行：

npm test

The JEST and Enzyme documentation provide more information such as different methods for testing different things and utilizing more data such as props and state values. But in general, this is a good place to start in understanding what unit tests are and when and how to implement them. For much information you can check out these links.

JEST和酶文档提供了更多信息，例如用于测试不同事物并利用更多数据(例如道具和状态值)的不同方法。 但总的来说，这是一个开始了解什么是单元测试以及何时以及如何实现它们的好地方。 有关更多信息，您可以查看这些链接。

翻译自: https://medium.com/@codenameuriel28/testing-in-react-97517baf1ad4

react测试