Jest: Jest 24: enzyme shallow rendered component snapshot is empty

Created on 5 Feb 2019 · 12Comments · Source: facebook/jest

🐛 Bug Report

Until Jest 23, shallow rendering any component, generated a detailed snapshot (See: https://repl.it/@karanjthakkar/EnzymeShallowWrapperJest23). Due to the changes done in #7448, this use case is now broken and returns an empty snapshot, without even the props(See: https://repl.it/@karanjthakkar/EnzymeShallowWrapperJest24).

To Reproduce

Compare results between v24 and v23 of pretty-format for a shallow component render.

Expected behavior

From the discussion in #7443, I guess that non enumerable symbolic properties were omitted from the snapshot to reduce the snapshot size and remove unimportant information. However in case of enzyme, all the properties in the shallow-ly wrapped component instance are non-enumerable props: https://github.com/airbnb/enzyme/blob/bcb6fa9e795aefeaab6db608b526a428f45c4b49/packages/enzyme/src/ShallowWrapper.js#L268 -> https://github.com/airbnb/enzyme/blob/bcb6fa9e795aefeaab6db608b526a428f45c4b49/packages/enzyme/src/Utils.js#L273 As such, I'm unsure if you would like to consider this as a bug in Jest or something that Enzyme should be fixing.

Link to repl or repo (highly encouraged)

Working with Jest 23: https://repl.it/@karanjthakkar/EnzymeShallowWrapperJest23
Broken with Jest 24: https://repl.it/@karanjthakkar/EnzymeShallowWrapperJest24

Run `npx envinfo --preset jest`

Paste the results here:

npx: installed 1 in 4.08s

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm

Wontfix

Source

karanjthakkar

👍14

Most helpful comment

These are private methods of Enzyme, why would you snapshot them? If you want to snapshot actual component structure from shallow wrapper, you'll need to add a proper serializer like https://github.com/adriantoine/enzyme-to-json

thymikee on 5 Feb 2019

👍12 ❤3 🎉3

All 12 comments

Also found a similar issue in the wild which someone "fixed" by reverting to Jest 23: https://stackoverflow.com/questions/54419342/jest-enzyme-shallowwrapper-is-empty-when-creating-snapshot

karanjthakkar on 5 Feb 2019

thymikee on 5 Feb 2019

👍12 ❤3 🎉3

@thymikee I agree the private methods are unnecessary fluff, but I would expect atleast component name and its props to be a part of the snapshot. I'll try that custom serializer and report back if it resolves the issue. 🙂

karanjthakkar on 5 Feb 2019

I've managed to resolve my issue by using the serializer you mentioned. Thanks! 💯Do you think it would be useful to mention somewhere (either in the docs/the changelog/the blogpost) that this previously "accidentally" supported functionality won't work for folks anymore? I know its marked as a breaking change but tbh the impact of that might not be easy to understand for people.

karanjthakkar on 5 Feb 2019

👍5

I think we have some mentions to enzyme in the docs so feel free to add a note about serializer then :)

thymikee on 5 Feb 2019

👍4

I'm still having this issue, despite using enzyme-to-json.

Component:

const Footer = () => (
  <div className='footer'>
    <h2>Footer</h2>
  </div>
)

is tested with this code:

test('matches the snapshot', () => {
    const tree = mount(<Footer />)
    expect(tree).toMatchSnapshot()
})

but generates an empty ReactWrapper in the snapshot:

exports[`<Footer /> matches the snapshot 1`] = `ReactWrapper {}`;

Here is my package.json, where I've set "snapshotSerializers": ["enzyme-to-json/serializer"]

{
  "name": "bengrunfeld.com",
  "version": "1.0.0",
  "description": "Personal blog website",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "updateSnapshot": "jest -u",
    "coverage": "jest --coverage",
    "buildDev": "rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",
    "buildProd": "rm -rf dist && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",
    "start": "node ./dist/server.js"
  },
  "repository": "https://github.com/bengrunfeld/bengrunfeld",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "express": "^4.16.4",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.7",
    "prop-types": "^15.7.2",
    "react": "next",
    "react-dom": "next",
    "react-router-dom": "^5.0.0",
    "styled-components": "^4.1.3"
  },
  "engines": {
    "node": ">=4.3.2"
  },
  "jest": {
    "setupFiles": [
      "./src/test/setup.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "bower_components",
      "shared"
    ],
    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",
      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.5.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-styled-components": "^1.10.0",
    "css-loader": "^2.1.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^5.15.3",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-jest": "^22.4.1",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.5.0",
    "jest-styled-components": "^6.3.1",
    "mini-css-extract-plugin": "^0.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "react-test-renderer": "^16.8.4",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-middleware": "^3.6.1",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-node-externals": "^1.7.2"
  }
}

bengrunfeld on 19 Mar 2019

👍17

test('matches the snapshot', () => {
    const component = shallow(<Footer />);
    expect(component.debug()).toMatchSnapshot();
})

seems to be producing similar results to react-test-renderer

const tree = renderer.create(<Footer />).toJSON();
expect(tree).toMatchSnapshot();

Any concerns about using shallow().debug() for snapshot testing rather than introducing a new dependency on enzyme-to-json?

pc-skhilko on 12 Apr 2019

👍10

any updates? shallow().debug() seems to do the work, but is it ok to use it?

flavluc on 30 Apr 2019

👀14 👍7 😕1

For snapshot testing do you guys recommend react-test-renderer's .toJSON() and/or .toTree() methods?

ElmirMahmudov on 6 Sep 2019

Thank you

Askat08 on 11 Jan 2020

I'm still having this issue, despite using enzyme-to-json.

Component:

const Footer = () => (
  <div className='footer'>
    <h2>Footer</h2>
  </div>
)

is tested with this code:

test('matches the snapshot', () => {
    const tree = mount(<Footer />)
    expect(tree).toMatchSnapshot()
})

but generates an empty ReactWrapper in the snapshot:

exports[`<Footer /> matches the snapshot 1`] = `ReactWrapper {}`;

Here is my package.json, where I've set "snapshotSerializers": ["enzyme-to-json/serializer"]

{
  "name": "bengrunfeld.com",
  "version": "1.0.0",
  "description": "Personal blog website",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "updateSnapshot": "jest -u",
    "coverage": "jest --coverage",
    "buildDev": "rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",
    "buildProd": "rm -rf dist && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",
    "start": "node ./dist/server.js"
  },
  "repository": "https://github.com/bengrunfeld/bengrunfeld",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "express": "^4.16.4",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.7",
    "prop-types": "^15.7.2",
    "react": "next",
    "react-dom": "next",
    "react-router-dom": "^5.0.0",
    "styled-components": "^4.1.3"
  },
  "engines": {
    "node": ">=4.3.2"
  },
  "jest": {
    "setupFiles": [
      "./src/test/setup.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "bower_components",
      "shared"
    ],
    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",
      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.5.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-styled-components": "^1.10.0",
    "css-loader": "^2.1.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^5.15.3",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-jest": "^22.4.1",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.5.0",
    "jest-styled-components": "^6.3.1",
    "mini-css-extract-plugin": "^0.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "react-test-renderer": "^16.8.4",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-middleware": "^3.6.1",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-node-externals": "^1.7.2"
  }
}

try to import import { shallowToJson } from "enzyme-to-json"; and wrap your tree with shallowToJson() like so expect(shallowToJson(tree)).toMatchSnapshot()

Askat08 on 13 Apr 2020

I am getting empty ShallowWrapper and ReactWrapper, even after using enzyme-to-json as serializer in my jest.config.js.
Here's my setup :

"preact" : 10.3.3,
"jest": 26.0.1,
"jest-enzyme": 7.1.2
"enzyme-to-json": 3.5.0
"enzyme-adapter-preact-pure" : 2.2.0

Part of jest.config.js :

moduleNameMapper: {
    '^react$': '<rootDir>/node_modules/preact/compat',
    '^react-dom$': '<rootDir>/node_modules/preact/compat',
    '^.+\\.(css|less|scss)$': 'identity-obj-proxy'
},
snapshotSerializers: ['enzyme-to-json/serializer']

And here's a sample example of the snapshot test :

import { shallowToJson } from 'enzyme-to-json';
import { shallow } from 'enzyme';
import Loader from './index';

describe('Loader Component', () => {
  it('should render correctly', () => {
    const component = shallow(<Loader />);
    console.log(component); // returns ShallowWrapper{}
    expect(shallowToJson(component)).toMatchSnapshot();
  });
});

Any leads will be helpful!