Jest: React 16.2.0 fragments do not work with snapshots

[rtymchyk]

What is the current behaviour?
If you create a component that returns a <React.Fragment/> somewhere within it, Jest reports TypeError: Cannot convert a Symbol value to a string when you shallow render it.

What is the expected behavior?
The snapshot should be generated without an error.

[SimenB]

@rtymchyk I cannot reproduce this - can you provide a full code sample (as the template requests you to)?

[kraynel]

Are you using enzyme-to-json to generate your snapshots ? I had the same error, and it seems to be already reported there: https://github.com/adriantoine/enzyme-to-json/issues/89

[rtymchyk]

I am not using enzyme-to-json but I'll see if I can isolate to other dependencies.

[rogeliog]

@rtymchyk are you using react-test-renderer?

[pigoz]

I had this problem and turns out I forgot to update [email protected] 😨

[cpojer]

Seems like that is probably it.

[rtymchyk]

Not using react-test-renderer & haven't been able to isolate the issue... Other libs I'm using are enzyme, enzyme-adapter-react-16, and jest-enzyme, all up to date.

[pedrottimark]

when you shallow render it

@rtymchyk Does it fail in a toMatchSnapshot assertion?

The reason people asked about enzyme-to-json is it converts Enzyme wrapper to a simpler JavaScript object (compatible with the way that react-test-renderer converts React elements).

A snapshot of Enzyme wrapper without conversion would include its implementation details that are not relevant to the rendered output of your application.

As Simen suggested, a sample of an assertion would help us to help you :)

[rtymchyk]

@pedrottimark Here is the test and the code being tested:

import React from 'react'
import { shallow } from 'enzyme'

import BreadCrumbs from './index'

describe('BreadCrumbs', () => {
  const defaultProps = {
    breacrumbs: [],
  }

  function renderBreadCrumbs (props) {
    const builtProps = {...defaultProps, ...props}
    return shallow(<BreadCrumbs {...builtProps} />)
  }

  it('renders correctly', () => {
    const breadcrumbs = renderBreadCrumbs({
      breadcrumbs: [
        ['Home', '/'],
        ['Page 1', '/page-1'],
        ['Page 2', '/page-1/page-2'],
      ],
    })

    expect(breadcrumbs).toMatchSnapshot()
  })
})

import React, { Fragment } from 'react'
import PropTypes from 'prop-types'

import BreadCrumbLink from 'components/articles/bread-crumb-link'

import { BreadCrumbContainer } from './styled'

export default function BreadCrumbs ({ breadcrumbs }) {
  return (
    <BreadCrumbContainer>
      {breadcrumbs.map((breadcrumb, index) => {
        const isFirst = index === 0
        const isLast = index === breadcrumbs.length - 1
        const label = breadcrumb[0]
        const url = breadcrumb[1]

        return (
          <Fragment key={label}>
            {isFirst ? null : ' > '}
            {isLast ? label : <BreadCrumbLink to={url}>{label}</BreadCrumbLink>}
          </Fragment>
        )
      })}
    </BreadCrumbContainer>
  )
}

BreadCrumbs.propTypes = {
  breadcrumbs: PropTypes.arrayOf(PropTypes.array).isRequired,
}

It fails on the toMatchSnapshot assertion.

[pedrottimark]

@rtymchyk Super! Thank you. I created a sample project from your code and it does look like the error suggested in https://github.com/facebook/jest/issues/5036#issuecomment-350297754

Can you see if package.json contains:

  "jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
  },

otherwise if the property is in a jest.config.js file instead?

[rtymchyk]

@pedrottimark I have not had any issues using the default snapshots that are generated with Enzyme wrappers. Definitely no implementation details. Is the suggestion to use a serializer?

[pedrottimark]

If the snapshots look like JSX then the serializer is somewhere in project config.

Without it the snapshot looks like:

ShallowWrapper {
  "length": 1,
  Symbol(enzyme.__root__): [Circular],
  Symbol(enzyme.__unrendered__): <BreadCrumbs
    breacrumbs={Array []}
    breadcrumbs={
      Array [
        Array [
          "Home",
          "/",
        ],
and so on

[rtymchyk]

This is strange because I'm definitely not using it explicitly anywhere, and my snapshots look close to regular JSX. Maybe something else is using it internally?

[pedrottimark]

Did you create your project with create-react-app?

It might be in whichever file you set up: Enzyme.configure({ adapter: new Adapter() });

For example, see setupFiles or setupTestFrameworkScriptFile under your jest config.

[rtymchyk]

Here's the config and associated files:

{
  "rootDir": "../../",
  "setupFiles": [
    "<rootDir>/config/jest/shims.js",
    "<rootDir>/config/jest/enzyme-setup.js"
  ],
  "setupTestFrameworkScriptFile": "<rootDir>/config/jest/setup.js",
  "roots": [
    "<rootDir>/src/"
  ],
  "testRegex": "tests.js$",
  "moduleDirectories": [
    "node_modules",
    "<rootDir>/src"
  ],
  "collectCoverageFrom": [
    "src/**/*.js"
  ],
  "coverageThreshold": {
    "global": {
      "statements": 70,
      "branches": 70,
      "functions": 70,
      "lines": 70
    }
  },
  "moduleNameMapper": {
    "^.+\\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$": "<rootDir>/src/mocks/file-asset.js",
    "^.+\\.(css)$": "identity-obj-proxy"
  },
  "globals": {
    "IS_BROWSER": true,
    "PUBLIC_KEYS": {},
  },
  "cacheDirectory": "./node_modules/.cache/jest"
}

setup:

import 'jest-enzyme'
import 'jest-styled-components'
import fetch from 'jest-fetch-mock'

global.fetch = fetch
global.FB = {
  login: jest.fn(),
  api: jest.fn(),
}

enzume-setup:

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

shims:

global.requestAnimationFrame = (callback) => {
  setTimeout(callback, 0)
}

[rtymchyk]

I did notice that jest-styled-components is using it https://github.com/styled-components/jest-styled-components/blob/4154dc3a71c6ebb2416cf7db9aaca3ad8b3ef7a2/package.json#L68

[pedrottimark]

Thank you for looking deeper into the dependencies.

Since it affects so many people who use Enzyme and Jest, maybe I can help the maintainer fix it :)

[rtymchyk]

Thank you for your help

[mjfaga]

A PR is open to fix this issue already: https://github.com/adriantoine/enzyme-to-json/pull/90

[rtymchyk]

FYI for anyone looking at this, the real package causing me issues was jest-enzyme (https://github.com/blainekasten/enzyme-matchers), which recently merged my PR to update enzyme-to-json