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

karanjthakkar · 2019-02-05T11:16:07Z

🐛 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

The text was updated successfully, but these errors were encountered:

karanjthakkar · 2019-02-05T11:23:49Z

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

thymikee · 2019-02-05T11:28:53Z

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

karanjthakkar · 2019-02-05T11:42:16Z

@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 · 2019-02-05T12:58:46Z

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.

thymikee · 2019-02-05T13:09:37Z

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

bengrunfeld · 2019-03-19T09:27:39Z

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"
  }
}

pc-skhilko · 2019-04-12T18:04:35Z

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?

flavluc · 2019-04-30T14:55:19Z

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

This is something that is not working after the upgrade to `react-scripts`, and also has the benefit of generating more correct and less brittle snapshots. The other option is adding [a proper serializer][1] like [enzyme-to-json][2], but this option also makes things easier to understand without adding another dependency. [1]: jestjs/jest#7802 [2]: https://github.com/adriantoine/enzyme-to-json

ElmirMahmudov · 2019-09-06T21:32:55Z

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

Fixes security vulnerabilities reported by npm audit and gives us latest react-scripts features and updates. Update Snapshot tests to work with latest Jest 24 required by react-scripts 3 by using the enzyme-to-json package (see jestjs/jest#7802).

* Update to react-scripts 3 Fixes security vulnerabilities reported by npm audit and gives us latest react-scripts features and updates. Update Snapshot tests to work with latest Jest 24 required by react-scripts 3 by using the enzyme-to-json package (see jestjs/jest#7802). * Update eslint config * Fix lint errors

Askat08 · 2020-01-11T18:04:30Z

Thank you

Askat08 · 2020-04-13T05:14:04Z

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

kanishk-anand-oyo · 2020-07-10T17:26:37Z

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!

github-actions · 2021-05-11T07:06:16Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

karanjthakkar added the 🐛 Bug label Feb 5, 2019

thymikee closed this as completed Feb 5, 2019

SimenB added Wontfix and removed 🐛 Bug labels Feb 5, 2019

andrewrlee mentioned this issue May 15, 2019

NN-1632 Adding offender page titles ministryofjustice/digital-prison-services#358

Merged

andrewrlee mentioned this issue Jun 6, 2019

Using shallow enzyme snapshot serializer ministryofjustice/digital-prison-services#397

Merged

cfcosta mentioned this issue Jun 24, 2019

Change the way we test snapshots kiali/kiali-ui#1273

Merged

pdittaro mentioned this issue Jun 27, 2019

Dependency Audit and Upgrade bcgov/mds#839

Merged

ryan-collingham mentioned this issue Sep 11, 2019

Update to react-scripts 3 morganstanley/testplan#277

Merged

astricus mentioned this issue May 14, 2020

All snapshots are empty ZhangMYihua/lesson-34#9

Closed

github-actions bot locked as resolved and limited conversation to collaborators May 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

karanjthakkar commented Feb 5, 2019

karanjthakkar commented Feb 5, 2019

thymikee commented Feb 5, 2019

karanjthakkar commented Feb 5, 2019

karanjthakkar commented Feb 5, 2019

thymikee commented Feb 5, 2019

bengrunfeld commented Mar 19, 2019

pc-skhilko commented Apr 12, 2019

flavluc commented Apr 30, 2019

ElmirMahmudov commented Sep 6, 2019

Askat08 commented Jan 11, 2020

Askat08 commented Apr 13, 2020

kanishk-anand-oyo commented Jul 10, 2020

github-actions bot commented May 11, 2021

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

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

Comments

karanjthakkar commented Feb 5, 2019

🐛 Bug Report

To Reproduce

Expected behavior

Link to repl or repo (highly encouraged)

Run npx envinfo --preset jest

karanjthakkar commented Feb 5, 2019

thymikee commented Feb 5, 2019

karanjthakkar commented Feb 5, 2019

karanjthakkar commented Feb 5, 2019

thymikee commented Feb 5, 2019

bengrunfeld commented Mar 19, 2019

pc-skhilko commented Apr 12, 2019

flavluc commented Apr 30, 2019

ElmirMahmudov commented Sep 6, 2019

Askat08 commented Jan 11, 2020

Askat08 commented Apr 13, 2020

kanishk-anand-oyo commented Jul 10, 2020

github-actions bot commented May 11, 2021

Run `npx envinfo --preset jest`