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...

Solution 1

I faced the same issue after updating to [email protected] I have reverted to the previous version [email protected] for the time being till i figure out what has changed. If you find what has changed, do post it here.

Solution 2

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

Solution 3

There shouldn't be a need of reverting version. Following the official DOC

You need to add this to your Jest configuration:

"snapshotSerializers": ["enzyme-to-json/serializer"]

clue: could be as easy as add it to your package.json, like:

{
  "name": "my-project",
  "jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
  }
}

Sorry if it wasn't the answer. I just saw no-one told it here and it must help other losts like me few minutes ago.

Solution 4

You need to use jest-enzyme like:

https://github.com/airbnb/enzyme/issues/1533#issuecomment-479591007

Solution 5

You can just use mount and debug function like this :

it('Should render Component', () => {
    const wrapper = mount(<Component {...props} />);
    expect(wrapper.debug()).toMatchSnapshot();
  });

View more solutions