Как сделать снимок для тестирования компонента с вложенным компонентом?

Question

Я тестирую компонент с вложенным компонентом, внутри которого используется избыточность. Я использую мелкий тест для компонента. Это мой тест:

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 пуст при создании снимка В основном я должен использовать энзим-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()
  })
)

На сайте github для enzyme-to-json есть пример, который показывает в качестве моего теста

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]}
/>
`;