测试 TaskList 组件

测试 TaskList

我们首先来规划组件的架构。由于该组件需要负责显示任务，因此 TaskList 必须能够访问这些任务。我们将使用 tasks 属性来传递这些任务。

目前该组件唯一的需求是显示通过 tasks 属性传入的所有任务。我们不会假设渲染任务本身会使用哪些组件。我们只需测试所有任务的文字内容是否都出现在页面上。

目前我将跳过导入和测试定义部分，因为之前已经讲解过。如果需要回顾，可以重新阅读之前的课程内容，或查看完整代码。

我们的第一个测试名为 it('必须渲染任务')。在其中定义一个任务数组：

1const tasks = ['做这个', '做那个', '什么也不做'];

这个数组将被传给 TaskList：

1render(<TaskList tasks={tasks} />);

现在，我们需要检查 tasks 中的每个元素是否都出现在网页上。这可以通过 getByText 函数实现：

1screen.getByText('做这个');

如果页面上没有匹配该文本的元素，这行代码会抛出异常，导致测试失败。为了检查全部三个任务，可以使用 for 循环或 .forEach 语句：

1tasks.forEach(task => screen.getByText(task));
2
3// 或者
4
5for (const task of tasks) {
6    screen.getByText(task);
7}

就这样！测试已完成！你可以在集成环境中直接运行它：

TaskList 的实现

当然，测试会失败。因为我们还没有编写组件！让我们通过定义组件来修复这个问题：

1import React from 'react';
2
3const TaskList = () => null;
4
5export default TaskList;

再次运行测试，你会看到不同的错误信息：

1● <TaskList /> › 必须渲染任务
2
3    无法找到包含指定文本的元素：做这个。这可能是因为文本被多个元素分割了。在这种情况下，你可以为文本匹配器提供一个函数，使匹配器更具灵活性。
4
5    <body>
6      <div />
7    </body>
8
9       9 |         render(<TaskList tasks={tasks} />);
10      10 |         for (const task of tasks) {
11    > 11 |             screen.getByText(task);
12         |                    ^
13      12 |         }
14      13 |     });
15      14 | });

如你所见，我们的组件成功渲染了空内容，而 Jest 也成功地让测试失败了。我们现在通过渲染 tasks 属性中的所有项目来修复这个问题：

1const TaskList = ({tasks}) => {
2  return (
3    <ul>
4      {tasks.map(task => <li key={task}>{task}</li>)}
5    </ul>
6  );
7};

完成！现在测试将会通过。你可以在本地运行，也可以在这里尝试：

快速回顾

在本课中，我们编写了一个新的单元测试，并根据该测试实现了 TaskList 组件。此外，我们还使用了 @testing-library/react 中的以下函数：

• render
• getByText