reactjs - 创建快照时 Jest/Enzyme ShallowWrapper 为空

Question

所以我正在为我的 Item 组件编写测试，我尝试渲染 ItemCard 组件，然后使用该包装器创建快照，但它返回一个空的 ShallowWrapper {}/

更多信息请查看代码:

项目.test.js

import { shallow } from 'enzyme';
import { ItemCard } from '../Item';

const fakeItem = {
  id: 'aksnfj23',
  title: 'Fake Coat',
  price: '40000',
  description: 'This is suuuper fake...',
  image: 'fakecoat.jpg',
  largeImage: 'largefakecoat.jpg',
};

describe('<ItemCard/>', () => {
  it('renders and matches the snapshot', () => {
    const wrapper = shallow(<ItemCard me item={fakeItem} showButtons />);

    // console.log(wrapper.debug());
    expect(wrapper).toMatchSnapshot();
  });
});

它创建的快照:

// Jest Snapshot v1

exports[`<ItemCard/> renders and matches the snapshot 1`] = `ShallowWrapper {}`;

据我所知，ShallowWrapper 中应该有一些内容，而不是空的......

Answer 1

对于 jest v24，你需要使用像 https://github.com/adriantoine/enzyme-to-json 这样的快照序列化器。

来源:https://github.com/facebook/jest/issues/7802