CODEWITHSUNDEEP
javascriptreactjsjestjsenzymeemotion
ryanzec
ryanzec

Reputation: 28040

jest snapshot breaks with emotion 10 / babel 7 using enzyme

So I had jest snapshots working properly generating css and html in the snapshots with babel 6 / emotion 9 however I need wanted to update to babel 7 and emotion 10 but my snapshot tests with enzyme no longer work. The code compiles and works fine after updating the required code, just the tests are broken (and nothing in the migration docs show anything related to testing setup updates).

test('renders properly', () => {
  // this works generating the correct css / html snapshot output
  expect(renderer.create(<component.Template>test</component.Template>).toJSON()).toMatchSnapshot();

  //this does not
  const wrapper = shallow(<component.Template>test</component.Template>);

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

The enzyme version generates this output:

exports[`renders properly 1`] = `
<ContextConsumer>
  <Component />
</ContextConsumer>
`;

I have tried add the emotion serializer both by adding it to the snapshotSerializers in the jest configuration and manually adding it in the setupFilesAfterEnv script.

Anyone know why I would get getting this output?

Upvotes: 9

Views: 539

Answers (1)

Mohit Yadav
Mohit Yadav

Reputation: 465

If you have configured everything correctly just do

test('renders properly', () => {
  const wrapper = shallow(<component.Template>test</component.Template>);
  expect(wrapper).toMatchSnapshot();
});

This should work as expected.

Upvotes: 1

Related Questions