reactjs - 快照测试如何工作以及 toMatchSnapshot( ) 函数在 React 组件的 Jest 快照测试中有何作用？

Question

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

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

2) 我遇到了一个示例，如下所示:

Wrapper = shallow(<First_Component />);
        
it("displays the result", () => {
   const test = Wrapper.find(Second_Component).length;
   expect(test).toMatchSnapshot();
});

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

Answer 1

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

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