React测试库入门

您可能在想：另一个 React 测试库？CSS-Tricks 上已经介绍了这么多（事实上，我已经发布了一个关于 Jest 和 Enzyme 的文章），难道选项还不够多吗？

但是，react-testing-library 不仅仅是另一个测试库。它是一个测试库，是的，但它构建于一个根本原则之上，这使它与其他测试库区别开来。

您的测试越能模拟软件的使用方式，它们就能给您带来越大的信心。

它尝试针对用户如何使用您的应用程序进行测试。事实上，它的实现方式使得即使您重构组件，测试也不会中断。我知道我们在 React 之旅的某个时刻都遇到过这种情况。

我们将一起花一些时间，使用 react-testing-library 为我构建的一个简单的待办事项应用程序编写测试。您可以本地克隆仓库：

git clone https://github.com/kinsomicrote/todoapp-test.git

如果您这样做，接下来安装所需的包：

## yarn
yarn add --dev react-testing-library jest-dom

## npm
npm install --save-dev react-testing-library jest-dom

如果您想知道为什么 Jest 在这里，我们使用它进行断言。在 src 目录内创建一个名为 __test__ 的文件夹，并创建一个名为 App.test.js 的新文件。

拍摄快照

快照测试会记录对已测试组件执行的测试，作为一种直观查看更改之间差异的方式。

当我们第一次运行此测试时，我们会拍摄组件外观的第一个快照。因此，第一次测试一定会通过，因为没有其他快照可以与之比较来表明某些内容失败了。只有当我们通过添加新元素、类、组件或文本对组件进行新的更改时，它才会失败。添加快照创建时或上次更新时不存在的内容。

快照测试将是我们在这里编写的第一个测试。让我们打开 App.test.js 文件并使其如下所示：

import React from 'react';
import { render, cleanup } from "react-testing-library";
import "jest-dom/extend-expect";
import App from './App';

afterEach(cleanup);

it("matches snapshot", () => {
  const { asFragment } = render(<app></app>);
  expect(asFragment()).toMatchSnapshot();
});

这导入了我们用于编写和运行测试的必要包。render 用于显示我们要测试的组件。我们使用 cleanup 在每次测试运行后清除内容——正如您在 afterEach(cleanup) 行中看到的那样。

使用 asFragment，我们获得渲染组件的 DocumentFragment。然后我们期望它与已创建的快照匹配。

让我们运行测试看看会发生什么：

## yarn
yarn test

## npm
npm test

正如我们现在所知，如果这是我们的第一个测试，则会在 __tests__ 目录内名为 __snapshots__ 的新文件夹中创建一个组件快照。我们实际上会在其中获得一个名为 App.test.js.snap 的文件，它看起来像这样：

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

exports[`matches snapshot 1`] = `
<documentfragment><div>
    <div>
      <div>
        <h2>
          Add Todo
        </h2>
      </div>
    </div>

      <div>
        <div>
          </div>
      </div>
      <div>
        <div>

            Add Task

        </div>
      </div>

    <div>
      <div>
        <h3>
          Lists
        </h3>
        <ul data-test="">
<li>
            <div>
              Buy Milk

                X

            </div>
          </li>
          <li>
            <div>
              Write tutorial

                X

            </div>
          </li>
        </ul>
</div>
    </div>
  </div>
</documentfragment>
`;

现在，让我们测试 DOM 元素和事件

我们的应用程序包含两个默认情况下在应用程序第一次运行时显示的待办事项。我们想确保它们确实在第一次应用程序运行时显示，因此，为了测试这一点，我们必须定位无序列表（<ul></ul>）并检查长度。我们期望长度等于 2——项目数。

it('it displays default todo items', () => {
  const { getByTestId } = render(<app></app>);
  const todoList = getByTestId('todos-ul');
  expect(todoList.children.length).toBe(2);  
});

我们在该代码段中使用 getByTestId 从 App 组件中提取测试 ID。然后我们设置 todoList 来定位 todos-ul 元素。这应该返回 2。

使用我们到目前为止学到的知识，看看您能否编写一个测试来断言用户可以在输入字段中输入值。以下是您需要执行的操作：

• 获取输入字段
• 为输入字段设置值
• 触发更改事件
• 断言输入字段的值与您在步骤 2 中为其设置的值相同

不要偷看我下面的答案！花尽可能多的时间。

还在继续吗？太棒了！我去喝杯咖啡，马上回来。

嗯，咖啡。☕️

哦，你完成了！你真棒。让我们比较答案。我的看起来像这样：

it('allows input', () => {
  const { getByTestId, fireEvent } = render(<app></app>);
  let item = 'Learn React';
  const todoInputElement = getByTestId('todo-input');
  todoInputElement.value = item;
  fireEvent.change(todoInputElement);
  expect(todoInputElement.value).toBe('Learn React');
});

使用 getByTestId，我能够提取应用程序中的测试 ID。然后我创建一个变量，将其设置为字符串“Learn React”，并使其成为输入字段的值。接下来，我使用其测试 ID 获取输入字段，并在设置输入字段的值后触发更改事件。完成此操作后，我断言输入字段的值确实是“Learn React”。

这与您的答案一致吗？如果您有其他方法，请留下评论！

接下来，让我们测试我们能否添加新的待办事项。我们将需要获取输入字段、添加新项目的按钮和无序列表，因为这些都是创建新项目所需的所有元素。

我们为输入字段设置一个值，然后触发按钮点击以添加任务。我们可以通过使用 getByText 获取按钮来做到这一点——通过对文本为“Add Task”的 DOM 元素触发点击事件，我们应该能够添加一个新的待办事项。

让我们断言无序列表元素中子元素（列表项）的数量等于 3。这假设默认任务仍然完好无损。

it('adds a new todo item', () => {
  const { getByText, getByTestId, fireEvent } = render(<app></app>);
  const todoInputElement = getByTestId('todo-input');
  const todoList = getByTestId('todos-ul');
  todoInputElement.value = 'Learn React';
  fireEvent.change(todoInputElement);
  fireEvent.click(getByText('Add Task'));
  expect(todoList.children.length).toBe(3); 
});

非常不错，对吧？

这只是在 React 中进行测试的一种方法

您可以在下一个 React 应用程序中尝试 react-testing-library。仓库中的文档非常详尽，并且——与大多数工具一样——是最佳的起点。Kent C. Dodds 构建了它，并且在 Frontend Masters（需要订阅）上有一个关于测试的完整课程，该课程还涵盖了 react-testing-library 的来龙去脉。

也就是说，这只是 React 的一个测试资源。当然还有其他资源，但希望您现在已经看到了一些内容，并且有兴趣尝试一下，当然也要使用最适合您项目的资源。

以上是React测试库入门的详细内容。更多信息请关注PHP中文网其他相关文章！