快照测试的工作原理以及 toMatchSnapshot() 函数在 React 组件的 Jest 快照测试中的作用是啥？

Posted 2023-02-16

【中文标题】快照测试的工作原理以及 toMatchSnapshot() 函数在 React 组件的 Jest 快照测试中的作用是啥？

【英文标题】：How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?快照测试的工作原理以及 toMatchSnapshot() 函数在 React 组件的 Jest 快照测试中的作用是什么？

【发布时间】：2018-10-17 05:38:26

【问题描述】：

我是 Jest 测试的新手，我正在浏览一些关于如何在 Jest 中为 React 组件编写测试用例的示例。我遇到了快照测试，并试图了解它实际上是什么。我从网上看到的是 “快照测试是一种通过生成其输出的 Json 表示来断言给定测试结果的方法。” 所以我对快照测试有两个疑问现在：

1) 假设我们有一个简单的组件，它有一个简单的段落。那么，如果我尝试使用快照测试对其进行测试，它将如何将其转换为组件的 JSON 表示形式？什么时候有用？

2) 我遇到了一个看起来像这样的例子：

    Wrapper = shallow(<First_Component />);

   it("displays the result", () => 
      const test = Wrapper.find(Second_Component).length;
      expect(test).toMatchSnapshot();
   );

那么，我对上述代码的疑问是 toMatchSnapshot() 函数如何在这里工作？

【参考方案1】：

Snapshots 允许您测试您的组件是否正确呈现，因此在您的情况下

expect(Wrapper).toMatchSnapshot()

如果您想测试给定组件的出现次数，请导入您的第二个组件并创建您的测试：

it("displays the result", () => 
  const test = Wrapper.find(Second_Component).length;
  expect(test).toEqual(1); // or the number of occurrence you're expecting
);

如果您对组件的 JSON 表示感兴趣，可以使用 enzyme-to-json package 来实现此目的

【讨论】：

首先，感谢您的回答。所以，我的理解是，快照会保留一个组件的副本，然后尝试将其与新组件进行比较。比较是通过 toMatchSnapshot() 函数完成的。我正确吗？

如果是这样的话，那么“expect(test).toEqual(1);”有什么区别？和“期望（包装器）.toMatchSnapshot（）；” ?

嗨@pranami 实际上在您的代码中，当您测试Wrapper.find(Component).length 时，您会测试当前正在测试的组件中呈现的组件Component 的出现次数。当您使用toMatchSnapshot 时，您正在测试组件在给定时间的“整体”渲染。这就是为什么，比如说，您在组件中添加一个元素，您必须更新快照，否则您的测试将失败。

【参考方案2】：

我认为这个问题没有得到足够详细的回答！ 快照测试基于您之前测试的历史记录。当您第一次运行快照测试时，它会创建一个文本文件，其中包含组件树的文本渲染。例如下面的测试：

import React from 'react';
import renderer from 'react-test-renderer';

it('renders correctly', () => 
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
);

将生成以下文本文件：

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter=[Function]
  onMouseLeave=[Function]
>
  Facebook
</a>
`;

您需要将这些快照文件保存在您的 VCS (git) 中。当您进行更改时，您可以运行这些测试以查看它是否与快照文本文件匹配。

更多阅读请阅读本文档：https://jestjs.io/docs/en/snapshot-testing

【讨论】：

什么是渲染器？

@AbdelhakAj 我已经更新了我的答案以满足您的问题，如果不清楚，请告诉我。

我的团队正在使用 Pipeline 运行测试。如果 git 版本中的快照是错误的，我需要更新它怎么办？我应该使用本地快照提交吗？如果我这样做了，我会通过第一个拉取请求的管道测试吗？