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

本文是JavaScript测试系列的实战第二篇，详细讲解了如何测试组件的Props，如何使用Enzyme的mount进行完全渲染测试以解决浅层渲染的局限性，以及Jest的快照测试原理和实践，帮助开发者更好地进行React组件测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇教程中，我们已经介绍了使用 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', () =>