JavaScript 测试系列实战（二）：深层渲染和快照测试

在上一篇教程中，我们已经介绍了使用 Enzyme 测试 React 组件的基本知识。今天，我们将更深入地挖掘并学习如何测试组件的 Props，如何（以及为什么）使用 mount 函数，以及什么是 Jest 快照测试。

测试组件的 Props

在前一篇文章中，我们已经测试了传递 Props 给组件的情况。但实际上，我们可以直接测试 Props。让我们回到之前写的 ToDoList 组件，但是这次我们使用一个 Task 组件。

Task 组件的代码如下：

// src/Task.js
import React from 'react';

const Task = (props) => {
  return <li>{props.name}</li>;
};

export default Task;
复制代码

修改后的 TodoList 组件代码如下：

// src/TodoList.js
import React from 'react';
import Task from './Task';

const ToDoList = (props) => {
  return (
    <ul>
      {props.tasks.map((task) => (
        <Task key={task.id} id={task.id} name={task.name} />
      ))}
    </ul>
  );
};

export default ToDoList;
复制代码

然后我们来测试 ToDoList 组件是否能够渲染 Task 组件并传递正确的 Props：

// src/TodoList.test.js
// ...

describe('ToDoList component', () => {
  // ...

  describe('when provided with an array of tasks', () => {
    const tasks = [
      {
        id: 0,
        name: 'Wash the dishes',
      },
      {
        id: 1,
        name: 'Make the bed',
      },
    ];

    it('passes them to the Task components', () &#