Enzyme: Snapshot in strange format

[fterradev]

I have just created this new React project with CRA.

Current behavior

Snapshot is looking like this:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
ShallowWrapper {
  "length": 1,
  Symbol(enzyme.__root__): [Circular],
  Symbol(enzyme.__unrendered__): <App />,
  Symbol(enzyme.__renderer__): Object {
    "batchedUpdates": [Function],
    "getNode": [Function],
    "render": [Function],
    "simulateEvent": [Function],
    "unmount": [Function],
  },
  Symbol(enzyme.__node__): Object {
    "instance": null,
    "key": undefined,
    "nodeType": "host",
    "props": Object {
      "children": <h2>
        Gift Giver
      </h2>,
    },
    "ref": null,
    "rendered": Object {
      "instance": null,
      "key": undefined,
      "nodeType": "host",
      "props": Object {
        "children": "Gift Giver",
      },
      "ref": null,
      "rendered": "Gift Giver",
      "type": "h2",
    },
    "type": "div",
  },
  Symbol(enzyme.__nodes__): Array [
    Object {
      "instance": null,
      "key": undefined,
      "nodeType": "host",
      "props": Object {
        "children": <h2>
          Gift Giver
        </h2>,
      },
      "ref": null,
      "rendered": Object {
        "instance": null,
        "key": undefined,
        "nodeType": "host",
        "props": Object {
          "children": "Gift Giver",
        },
        "ref": null,
        "rendered": "Gift Giver",
        "type": "h2",
      },
      "type": "div",
    },
  ],
  Symbol(enzyme.__options__): Object {
    "adapter": ReactSixteenAdapter {
      "options": Object {
        "enableComponentDidUpdateOnSetState": true,
      },
    },
    "disableLifecycleMethods": true,
  },
}
`;

Expected behavior

I was expecting something in a format more like this, notably without loads of Symbols and with a pretty, 'JSX string'-only "node" property:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App renders correctly 1`] = `
ShallowWrapper {
  "complexSelector": ComplexSelector {
    "buildPredicate": [Function],
    "childrenOfNode": [Function],
    "findWhereUnwrapped": [Function],
  },
  "length": 1,
  "node": <div>
    <h2>
        Gift Giver
    </h2>
</div>,
  "nodes": Array [
    <div>
      <h2>
            Gift Giver
      </h2>
</div>,
  ],
  "options": Object {},
  "renderer": ReactShallowRenderer {
    "_instance": ShallowComponentWrapper {
      "_calledComponentWillUnmount": false,
      "_compositeType": 0,
      "_context": Object {},
      "_currentElement": <App />,
      "_debugID": 1,
      "_hostContainerInfo": null,
      "_hostParent": null,
      "_instance": App {
        "_reactInternalInstance": [Circular],
        "addGift": [Function],
        "context": Object {},
        "props": Object {},
        "refs": Object {},
        "removeGift": [Function],
        "state": Object {
          "gifts": Array [],
        },
        "updater": Object {
          "enqueueCallback": [Function],
          "enqueueCallbackInternal": [Function],
          "enqueueElementInternal": [Function],
          "enqueueForceUpdate": [Function],
          "enqueueReplaceState": [Function],
          "enqueueSetState": [Function],
          "isMounted": [Function],
          "validateCallback": [Function],
        },
      },
      "_mountOrder": 1,
      "_pendingCallbacks": null,
      "_pendingElement": null,
      "_pendingForceUpdate": false,
      "_pendingReplaceState": false,
      "_pendingStateQueue": null,
      "_renderedComponent": NoopInternalComponent {
        "_currentElement": <div>
          <h2>
                    Gift Giver
          </h2>
</div>,
        "_debugID": 2,
        "_renderedOutput": <div>
          <h2>
                    Gift Giver
          </h2>
</div>,
      },
      "_renderedNodeType": 0,
      "_rootNodeID": 0,
      "_topLevelWrapper": null,
      "_updateBatchNumber": null,
      "_warnedAboutRefsInRender": false,
    },
    "getRenderOutput": [Function],
    "render": [Function],
  },
  "root": [Circular],
  "unrendered": <App />,
}
`;

Your environment

Windows 10, project bootstraped with CREATE-REACT-APP.
Packages:

{
  "name": "giftgiver",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "jest-cli": "^22.4.0",
    "react-test-renderer": "^16.2.0"
  }
}

API

• [x] shallow
• [ ] mount
• [ ] render

Version

| library | version
| ---------------- | -------
| Enzyme | 3.3.0
| React | 16.2.0

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

[ljharb]

enzyme does not have snapshot support; it looks like you might be depending on some internal properties that were removed in enzyme 2. Perhaps whatever you’re using for snapshots needs to be updated for enzyme 3?

[ljharb]

Separately, you probably want to use .debug() rather than trying to stringify the wrapper itself.

[gregtillbrook]

I just hit the same problem and as @ljharb suggests, using .debug() worked a treat to get readable snapshots without the symbols etc
i.e.

const wrapper = shallow(<MyComponent />);
expect(wrapper.debug()).toMatchSnapshot();

[ZwaarContrast]

I ran into the issue as well. Adding the .debug() function call to the wrapper worked for me. Full example using Jest, Enzyme and enzyme-to-json serializer:

Component:

import { NavLink } from 'react-router-dom'

import styled from 'styled-components'
import { styling } from '/components/MenuLink'

// thin wrapper around react-router NavLink using our own MenuLink styling
export default styled(NavLink)`
    ${styling};
`

Test:

import * as React from 'react'
import { mount } from 'enzyme'
import { MemoryRouter } from 'react-router'
import MenuLink from './'
import 'jest-styled-components'

describe('Router MenuLink', () => {
    it('renders without breaking', () => {
        const wrapper = mount(
            <MemoryRouter>
                <MenuLink to="/settings">Settings</MenuLink>
            </MemoryRouter>
        )

        expect(wrapper.debug()).toMatchSnapshot()
    })
})

setupEnzyme.js

// setup file
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

Package.json:

  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/test/setupEnzyme.js"
  }

[robboerman2]

@ZwaarContrast i'm currently facing the same issue in combination with the styling package styled-components. how did you solve this issue?

[ZwaarContrast]

@robboerman2, with the exact code mentioned above. Adding the .debug() in the test worked for me, since then I have changed the implementation though:

Component:

import { NavLink } from 'react-router-dom'
import styled from 'styled-components'

export default styled(NavLink)`
   // styling goes here
`

Test:

import * as React from 'react'
import { mount } from 'enzyme'
import { MemoryRouter } from 'react-router'
import MenuLink from './'
import 'jest-styled-components'

describe('Router MenuLink', () => {
    it('renders without breaking', () => {
        const wrapper = mount(
            <MemoryRouter>
                <MenuLink to="/settings">Settings</MenuLink>
            </MemoryRouter>
        )

        expect(wrapper.find(MenuLink)).toMatchSnapshot()
    })
})

[ludder]

I had this same issue with a clean CRA + Enzyme installation. It appeared I forgot to install jest-enzyme. Run yarn add jest-enzyme and import it in setupTests.js:

import "jest-enzyme";