Snapshot 测试如何工作以及 toMatchSnapshot( ) 函数在 React 组件的 Jest Snapshot 测试中有什么作用?
How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?
我是 Jest 测试的新手,我正在研究一些如何在 Jest 中为 React 组件编写测试用例的示例。我遇到了快照测试,并试图了解它实际上是什么。我从网上看到的是 “快照测试是一种通过生成其输出的 Json 表示来断言给定测试结果的方法。” 所以我有目前 Snapshot 测试有 2 个疑问:
1) 假设我们有一个简单的组件,它有一个简单的段落。那么,如果我尝试使用快照测试来测试它,它将如何将其转换为组件的 JSON 表示形式?什么时候有用?
2) 我遇到了一个看起来像这样的例子:
Wrapper = shallow(<First_Component />);
it("displays the result", () => {
const test = Wrapper.find(Second_Component).length;
expect(test).toMatchSnapshot();
});
所以,我对上面代码的问题是 toMatchSnapshot()
函数在这里是如何工作的?
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
我认为这个问题没有得到足够详细的回答!
快照测试基于您之前测试的历史记录。当您第一次 运行 快照测试时,它会创建一个文本文件,其中包含组件树的文本渲染。例如下面的测试:
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
我是 Jest 测试的新手,我正在研究一些如何在 Jest 中为 React 组件编写测试用例的示例。我遇到了快照测试,并试图了解它实际上是什么。我从网上看到的是 “快照测试是一种通过生成其输出的 Json 表示来断言给定测试结果的方法。” 所以我有目前 Snapshot 测试有 2 个疑问:
1) 假设我们有一个简单的组件,它有一个简单的段落。那么,如果我尝试使用快照测试来测试它,它将如何将其转换为组件的 JSON 表示形式?什么时候有用?
2) 我遇到了一个看起来像这样的例子:
Wrapper = shallow(<First_Component />);
it("displays the result", () => {
const test = Wrapper.find(Second_Component).length;
expect(test).toMatchSnapshot();
});
所以,我对上面代码的问题是 toMatchSnapshot()
函数在这里是如何工作的?
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
我认为这个问题没有得到足够详细的回答! 快照测试基于您之前测试的历史记录。当您第一次 运行 快照测试时,它会创建一个文本文件,其中包含组件树的文本渲染。例如下面的测试:
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