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

2023-09-05 19:06:30

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

在上一篇文章中，我们已经测试了传递 Props 给组件的情况，我们使用了一个简单的组件，叫做 <Greeting/>，它接受一个叫做 name 的 Props。我们创建了一个简单的测试，来确保当我们传递不同的 name 给组件时，它会显示正确的文本。

但是，Enzyme 还提供了更强大的功能，让我们可以测试组件的内部状态和行为。例如，我们可以使用 mount 函数来创建一个组件的完整副本，包括它的子组件。这允许我们测试组件在不同情况下是如何表现的，比如当它的子组件改变时。

快照测试是另一种非常有用的测试技术。它允许我们记录组件在特定状态下的外观，并在以后的测试中与之比较。这有助于确保组件在未来不会改变，即使它的代码发生了变化。

在本文中，我们将学习如何使用这些技术来测试 React 组件。我们将从一个简单的示例开始，然后逐步深入到更复杂的情况。

测试组件的 Props

我们可以使用 Enzyme 的 props() 方法来测试组件的 Props。此方法返回一个对象，包含组件的所有 Props。我们可以使用该对象来验证组件是否接收到了正确的 Props，以及它是否以我们期望的方式使用这些 Props。

例如，我们可以这样测试 <Greeting/> 组件：

import React from "react";
import Enzyme, { shallow } from "enzyme";
import Greeting from "./Greeting";

describe("Greeting", () => {
  it("should display the correct name", () => {
    const wrapper = shallow(<Greeting name="John" />);
    expect(wrapper.props().name).toBe("John");
  });
});

在这个测试中，我们首先创建了一个 <Greeting/> 组件的浅层副本。然后，我们使用 props() 方法来获取组件的 Props，并验证 name Props 的值是否正确。

深层渲染

有时，我们需要测试组件的子组件是如何工作的。例如，我们可以有一个 <User/> 组件，它包含一个 <Profile/> 子组件。我们需要确保 <User/> 组件正确地渲染了 <Profile/> 子组件，并且子组件以我们期望的方式工作。

为了测试这种情况，我们可以使用 Enzyme 的 mount() 函数。此函数创建一个组件的完整副本，包括它的子组件。我们可以使用该副本来测试组件是如何与它的子组件交互的。

例如，我们可以这样测试 <User/> 组件：

import React from "react";
import Enzyme, { mount } from "enzyme";
import User from "./User";

describe("User", () => {
  it("should render the Profile component", () => {
    const wrapper = mount(<User />);
    expect(wrapper.find(Profile).exists()).toBe(true);
  });
});

在这个测试中，我们首先创建了一个 <User/> 组件的完整副本。然后，我们使用 find() 方法来查找 <Profile/> 子组件。最后，我们验证 <Profile/> 子组件是否存在。

快照测试

快照测试是一种非常有用的技术，它可以帮助我们确保组件在未来不会改变。快照测试允许我们记录组件在特定状态下的外观，并在以后的测试中与之比较。

为了创建快照测试，我们可以使用 Jest 的 toMatchSnapshot() 方法。此方法将组件的当前外观保存到一个文件中。在以后的测试中，Jest 将比较组件的当前外观与保存的外观，并报告任何差异。

例如，我们可以这样创建 <Greeting/> 组件的快照测试：

import React from "react";
import Enzyme, { shallow } from "enzyme";
import Greeting from "./Greeting";

describe("Greeting", () => {
  it("should match the snapshot", () => {
    const wrapper = shallow(<Greeting name="John" />);
    expect(wrapper).toMatchSnapshot();
  });
});

在这个测试中，我们首先创建了一个 <Greeting/> 组件的浅层副本。然后，我们使用 toMatchSnapshot() 方法来保存组件的当前外观。在以后的测试中，Jest 将比较组件的当前外观与保存的外观，并报告任何差异。

快照测试非常有用，因为它可以帮助我们快速发现组件的意外变化。如果组件的外观发生了变化，Jest 将报告差异，我们可以立即调查问题。