React单元测试反应单元测试（教程）

介绍

面对现实吧-没有比对它们进行测试更好的方法来更好地测试您的应用程序了！我们可以全天候构建并以视觉方式获得我们想要的结果。但是，当存在一个隐藏的错误时会发生什么？如果此错误表明存在严重漏洞，该怎么办？使用单元测试可以在我们的React应用程序中避免所有这些情况。

必要的依赖

好的，那么所需的依赖项是什么，以及如何安装它们？不用担心-我现在就在这里包括这些有价值的信息。我们总共需要三个依赖项，因此让我们首先安装这些依赖项：

npm install jest-dom
npm install react-test-renderer
npm install @testing-library/react

即使您具有这些依赖关系中的任何一个，也始终要确保您的版本是最新的，这是一个好主意。如果您的应用是使用创建的create-react-app，则您可能已经使用进行了设置，@testing-library/react因为它用于测试App.test.js初始设置随附的默认文件。

如何进行自己的测试

我不想成为让您投入工作的家伙，但是对您而言，阅读时遵循代码非常重要。单元测试并不困难，但是如果您尝试仅凭阅读来理解它，可能会有些混乱和不知所措。

好的，让我们开始吧！

应用程序设置（用于测试）

首先在src名为下创建一个新文件夹components。在此文件夹中，创建另一个名为的文件夹buttons。在这里，在您的buttons文件夹中创建两个文件。他们是button.js和button.css。

在中button.js，放置以下代码：

// /src/components/buttons/button.js
import React from 'react';
import './button.css';

function Button({label}){
    return <div data-testid="button" className="button-style">{label}</div>
}

export default Button;

在这里，我们使用的功能组件{label}作为支撑。您还会注意到我们正在使用data-testid="button"。data-*是可用于测试的HTML属性，当另一个开发人员出现并更改ID或类的名称时，此属性特别有用。您可以查找data更多信息，但对于时间有限的用户，这是总结概念的绝佳来源。

好的，让我们大致访问应用程序（App.js）的顶层。应用此代码：

// App.js
import React from 'react';
import Button from './components/buttons/button';

function App() {
  return (
    <div className="App">
      <header>
        <Button label="click me please"></Button>
      </header>
    </div>
  );
}

export default App;

在div与类“应用程序”并不重要，但在这一点上，你应该删除App.test.js的编辑App.js以后将喙测试。我们不需要App.test.js本教程。

接下来，我们将回到buttons文件夹并打开button.css。放入以下代码：

// /src/components/buttons/button.css

.button-style {
    border: 1px solid grey;
    padding: 10px;
    text-align: center;
}

除非您计划启动应用程序以直观地查看呈现的功能组件，否则有关添加CSS样式的这一部分实际上并不是必需的。它只是包含在本教程中，很有趣！:)

单元测试时间

最后，有趣的部分！在您的src/components/buttons文件夹中，创建一个名为的新文件夹__test__。在此文件夹中，我们将创建一个名为的文件button.test.js。当单元测试开始时，它将沿着您的应用程序树向下移动，以查找具有.test.js扩展名的任何文件。此信息将很重要，并在不久后进一步解释。

在中button.test.js，我们想从文件顶部开始一些基本的导入。它看起来应该像这样：

// /src/components/buttons/__test__/button.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './../button';
import { render } from '@testing-library/react';

如果您不熟悉应用程序树中的导入，请检查React docs和Google。如果您正在使用React开发，那么您应该已经知道如何使用它们。

好了，所以我们{ render }从这里接走了@testing-library/react。我们将立即在进口以下的第一次测试中使用此功能。

// uses @testing-library/react
it('renders without crashing',  () => {
    const div = document.createElement("div");
    ReactDOM.render(<Button></Button>, div)
})

it()有两个参数。我们为测试提供了第一个参数的描述字符串，以“无需崩溃即可渲染”，然后为第二个参数提供匿名函数，如果该函数执行没有问题，则该匿名函数将负责返回布尔值。为了用英语表达，我们正在设置div分配给的变量document.createElement("div")。然后，我们将Button组件呈现到DOM。

要运行此第一个测试，请继续并键入npm test您的IDE终端，并在出现提示时按Enter。来吧，我等。:)

...

您的第一个测试已通过！我们已经验证了可以呈现元素而不会导致应用程序崩溃。做得好！要结束测试，只需按CTRL + C一下IDE终端。现在，我们可以继续进行单元测试以获取DOM元素中的当前值。

我们将需要另一进口。继续并将其添加到顶部的导入中：

// /src/components/buttons/__test__/button.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './../button';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'; 
// New import ^

在中@testing-library/jest-dom/extend-expect，我们可以访问依赖项expect()附带的功能jest-dom。

接下来，将此测试添加到第一个测试下面：

//uses @testing0library/jest-dom/extend-expect
it('renders button correctly', () => {
    const { getByTestId } = render(<Button label="click me please"></Button>)
    expect(getByTestId('button')).toHaveTextContent("click me please")
})

这是我们Button测试组件的地方！我们正在变量下创建一个按钮，并创建一个getByTestId标签“请点击我”，并期望它包含“请点击我”。如果我们无法将道具传递到组件中，则该测试将失败。然而！继续并再次运行测试。惊喜！他们又过去了！

不过，我们有一个问题...请看下面的两个测试：

//uses @testing0library/jest-dom/extend-expect
it('renders button correctly', () => {
    const { getByTestId } = render(<Button label="click me please"></Button>)
    expect(getByTestId('button')).toHaveTextContent("click me please")
})

it('renders button correctly', () => {
    const {getByTestId} = render(<Button label="save"></Button>)
    expect(getByTestId('button')).toHaveTextContent("save")
})

有什么奇怪的发现吗？它们都是相同的测试，但它们之间要测试的道具值不同。
如果我们尝试运行测试，则会收到错误消息！found multiple elements by [data-testid="button"]。我们需要做的是包括一些在完成每个测试后清理测试的方法。幸运的是，这很容易做到。

还记得顶部的导入朋友import { render } from '@testing-library/react';吗？我们将做一个小改变：

import { render, cleanup } from '@testing-library/react';。

然后，在您的导入下方和测试上方，包括以下行：

afterEach(cleanup)

现在，您可以再次运行测试。看看，他们又过去了！

在最后一课中，我们将介绍测试的JSON快照。当快照创建通过测试的实例并将该快照与将来的测试进行比较以确保它们匹配时，这些功能非常有用。

首先在文件顶部添加最终导入：
import renderer from 'react-test-renderer';

现在我们有了renderer，我们将编写最终测试。将最后一个测试放在其他测试的底部：

// uses renderer to create a snapshot of the Button component
it('matches snapshot', () => {
    // creates snapshot and converts to JSON
    const tree = renderer.create(<Button label="save"></Button>).toJSON()
    // expects the snapshot to match the saved snapshot code found in the __snapshot__ folder
    expect(tree).toMatchSnapshot()
})

如上所述，我们已经创建了测试快照，用于与其他测试运行进行比较。您可以在下找到此新快照/src/components/buttons/__test__/__snapshots__/button.test.js.snap。在运行测试后，将为您创建此新文件夹/文件。