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

It looks like `mount` instead of `shallow` will make you happy — Alejandro, Jan 30 '19 at 18:36
@Alez I changed to `mount` from `shallow` in the test to function component and it passed, I don't know why. — Mrmld Sky, Oct 22 '21 at 16:27

score 36 · Answer 1 · answered Feb 06 '19 at 11:33

36

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

answered Feb 06 '19 at 11:33

Titenis

555
7
14

1

This is not working for me with `jest: 24`, `enzyme: 3.9.0`, `enzyme-adapter-react-16: 1.11.2`, `enzyme-to-json: 3.3.5`. I've installed and configured `enzyme-to-json` in `package.json` but still getting an empty `ShallowWrapper` in the snapshot code. :( The only thing that works is using trusty old `react-test-renderer`, which is not ideal. – Ben Mar 19 '19 at 10:04
1

Can confirm working with `jest: 24.1.0`, `enzyme: 3.4.0`, `enzyme-adapter-react-16: 1.2.0`, `enzyme-to-json: 3.4.0`. Should be the accepted answer – Oleg G Oct 01 '19 at 09:13

Uri.Ustrell · Answer 2 · 2020-01-11T15:00:51.987

26

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.

edited Jan 11 '20 at 15:00

answered Jan 11 '20 at 12:26

Uri.Ustrell

261
3
4

1

You can set the same `snapshotSerializers: ['enzyme-to-json/serializer'],` in jest.config.js – igor Sep 26 '20 at 09:16
This still works in Jest v26. You have to `npm install enzyme-to-json --save-dev` (or `yarn add`), and then either of the above works. – Stokesified Aug 17 '21 at 11:46
It the docs it says it has a default serializer but with the solution mentioned here I get my tests passed. – Matthis Kohli Feb 01 '22 at 14:09

score 7 · Accepted Answer · answered Feb 01 '19 at 14:46

7

I faced the same issue after updating to jest@24.0.0 I have reverted to the previous version jest@23.6.0 for the time being till i figure out what has changed. If you find what has changed, do post it here.

answered Feb 01 '19 at 14:46

user2564429

260
2
11

1

That's it... I just fixed it yesterday by downgrading Jest.. it's weird but now it works fine. – dragi Feb 01 '19 at 14:49
downgraded and still facing same issue – Tzvetlin Velev Mar 15 '19 at 17:51
3

Reverting to `Jest 23` complete breaks Babel if you're on version 7 because it tries to call version 6. – Ben Mar 19 '19 at 10:02
See the answer by Titenis and the linked GitHub issue. – maracuja-juice Apr 18 '19 at 19:23

score 7 · Answer 4 · answered Oct 12 '19 at 15:08

7

You need to use jest-enzyme like:

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

answered Oct 12 '19 at 15:08

Jeyhun Ashurbayov

746
7
11

score 4 · Answer 5 · answered Jul 08 '19 at 13:46

4

You can just use mount and debug function like this :

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

answered Jul 08 '19 at 13:46

samuelgomez

41
2

work also with Shallow, but just contain inner component – samuelgomez Jul 08 '19 at 13:50
did you find any solution to this? I am facing same problem, it only has innerComponent without any html in it. – CHash11 Aug 30 '19 at 04:36

score 4 · Answer 6 · answered Aug 21 '19 at 13:37

use debug() method after the wrapper

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

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

score 2 · Answer 7 · answered Jan 04 '20 at 16:26

I faced the same issue and resolved using serializer https://github.com/adriantoine/enzyme-to-json.

npm install --save-dev enzyme-to-json

Once installed the enzyme-to-json we can use something like below

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

The same can be resolved using shallow().debug() but prefer to use the above method.

also add below in jest configurations: "snapshotSerializers": ["enzyme-to-json/serializer"] It may be in 'package.json' file within "jest" object or in 'jest.config.js' file. — saurabh, Jun 09 '20 at 19:23

score 2 · Answer 8 · answered Nov 19 '20 at 03:48

Perhaps a bit late, but i managed to get a solution of this problem by using https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/getElement.html

describe("Button", () => {
  it("should render basic button correctly", () => {
    const tree = shallow(<Button></Button>);
    expect(tree.getElement()).toMatchSnapshot();
  });
});

this work on Jest 26.5.3 and enzyme 3.10.5

score 0 · Answer 9 · answered Jun 23 '21 at 00:23

just sharing my case:

before I was getting it:

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

I changed 2 places to have everything working as expected:

yarn add enzyme-to-json
added this line to JEST config in package.json:

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

This is my package.json:

"dependencies": {
    "next": "11.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/preset-env": "7.14.5",
    "@babel/preset-react": "7.14.5",
    "@types/jest": "^26.0.23",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
    "babel": "^6.23.0",
    "babel-jest": "^27.0.2",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.2",
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.0",
    "jest": "^27.0.4"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/setupTests.js"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }

Jest/Enzyme ShallowWrapper is empty when creating Snapshot

9 Answers9

Linked