深入剖析 JavaScript 测试：props 测试、挂载函数及快照测试

JavaScript 测试教程–part 3：测试 props，挂载函数和快照测试

JavaScript 测试-超越基础

大家好，欢迎来到 JavaScript 测试教程系列的第三部分。在上一篇文章中，我们介绍了使用 Enzyme 测试 React 组件的基础知识。今天，将进行更深入的研究，并学习如何测试 props，如何（以及为什么）使用 mount 函数以及什么是快照测试。开始吧！

测试 props

在上一篇文章中，我们测试了通过一些 props 的结果。但是实际上，我们可以做的不仅仅是检查最终的结果。我们可以测试特定的 props 是否被传递给组件，以及它们是否具有我们所期望的值。

为此，我们可以使用 Enzyme 的 props() 方法。这个方法返回一个对象，其中包含组件的所有 props。例如，我们可以使用以下代码来测试 Button 组件是否收到了 onClick prop：

it('should receive an onClick prop', () => {
  const wrapper = shallow(<Button onClick={() => {}} />);
  expect(wrapper.props()).toHaveProperty('onClick');
});

我们还可以使用 props() 方法来测试 prop 的值。例如，我们可以使用以下代码来测试 Button 组件是否收到了具有特定值的 label prop：

it('should receive a label prop with the value "Click me"', () => {
  const wrapper = shallow(<Button label="Click me" />);
  expect(wrapper.props()).toHaveProperty('label', 'Click me');
});

使用 mount 函数

到目前为止，我们已经使用 shallow() 函数来渲染我们的组件。但是，有时我们需要能够访问组件的整个生命周期，包括挂载和卸载。为此，我们可以使用 mount() 函数。

mount() 函数会创建一个组件的完整副本，包括所有子组件。这意味着我们可以测试组件生命周期的所有方面，包括挂载、更新和卸载。

例如，我们可以使用以下代码来测试 Button 组件是否在挂载时调用 componentDidMount() 方法：

it('should call componentDidMount when mounted', () => {
  const spy = jest.spyOn(Button.prototype, 'componentDidMount');
  const wrapper = mount(<Button />);
  expect(spy).toHaveBeenCalled();
});

快照测试

快照测试是一种测试方法，它可以确保组件的输出在一段时间内保持一致。为此，它会将组件的输出与预先记录的“快照”进行比较。如果输出发生变化，则测试将失败。

快照测试对于测试组件的视觉输出非常有用。例如，我们可以使用以下代码来测试 Button 组件的快照：

it('should match the snapshot', () => {
  const wrapper = shallow(<Button label="Click me" />);
  expect(wrapper).toMatchSnapshot();
});

首次运行此测试时，它会创建一个快照文件。在随后的运行中，测试将比较组件的输出与该文件中的快照。如果输出发生变化，则测试将失败。

结论

在本教程中，我们学习了如何测试 props，如何使用 mount 函数以及什么是快照测试。这些都是强大的工具，可以帮助我们确保 React 组件按预期工作。

在下一篇文章中，我们将继续学习 JavaScript 测试的更高级主题，敬请期待！

术语表

• props： 组件从父组件接收的数据。
• shallow() 函数： 一个 Enzyme 函数，用于渲染组件的浅副本。
• mount() 函数： 一个 Enzyme 函数，用于渲染组件的完整副本。
• 快照测试： 一种测试方法，它可以确保组件的输出在一段时间内保持一致。