Question

我是Jest测试的新手，我正在阅读一些关于如何在Jest for React组件中编写测试用例的示例。我遇到了快照测试，并试图了解它实际上是什么。我从网上看到的是＆＃34;快照测试是一种通过生成其输出的Json表示来断言给定测试结果的方法。＆＃34; 所以我有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

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

Answer 2

我认为这个问题没有得到足够详细的回答！快照测试基于先前测试的历史记录。首次运行快照测试时，它将创建一个文本文件，其中包括组件树的文本呈现。例如以下测试：

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

快照测试的工作原理以及toMatchSnapshot（）函数在React组件的Jest Snapshot测试中的作用是什么？

2 个答案: