Jest/Enzyme ShallowWrapper is empty when creating Snapshot

Question

So I'm writing a test for my Item component and I tried to render the ItemCard component and then use that wrapper to create a snapshot but it returns an empty ShallowWrapper {}

Please see the code for more info:

Item.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();   }); }); 

The snap it creates:

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

As far as I know the ShallowWrapper should have some content in it instead of being empty...

Answer 1

For jest v24 you need to use snapshot serializer like https://github.com/adriantoine/enzyme-to-json

source: https://github.com/facebook/jest/issues/7802