Question

我正在测试带有嵌套组件的组件，该组件内部使用redux。我正在对该组件进行浅层测试。这是我的测试：

describe("Header", () =>
  void it("renders correctly", () => {
    const renderer = new ShallowRenderer()
    const tree = renderer.render(<Header />)
    expect(tree).toMatchSnapshot();
  })

快照输出为：

exports[`Header renders correctly 1`] = `
<mockConstructor
  render={[Function]}
/>
`;

这是正确的吗？快照不应该显示我的组件吗？

Answer 1

尝试使用shallow软件包中的enzyme：

import { shallow } from 'enzyme';
import Header from './Header';

describe('Header', () => {
  it('should render', () => {
    const wrapper = shallow(<Header />);
    expect(wrapper).toMatchSnapshot();
  });
});

Answer 2

我按照您所说的更改了代码，代码段的快照输出为：

exports[`Header renders correctly 1`] = `ShallowWrapper {}`;

我发现有关此输出的信息Jest/Enzyme ShallowWrapper is empty when creating Snapshot 基本上我必须使用酶转json，所以我将代码更改为：

import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
...

describe("Header", () =>
  void it("renders correctly", () => {
    const tree = shallow(<Header />)
    expect(toJson(tree)).toMatchSnapshot()
  })
)

在enzyme-to-json的github站点上，有一个示例显示为我的测试

import React, {Component} from 'react';
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';

it('renders correctly', () => {
  const wrapper = shallow(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>
  );

  expect(toJson(wrapper)).toMatchSnapshot();
});

但是快照是：

exports[`Header renders correctly 1`] = `
<mockConstructor
  render={[Function]}
/>
`;

如何使用嵌套组件对组件进行快照测试？

2 个答案: