Passing into props an Array with elements wrapped in React.Fragment results in UNDEFINED nodes

[wytrych]

Test case:

import React from 'react';
import toJson from 'enzyme-to-json';
import { shallow } from 'enzyme';

const arr = [
  (
    <React.Fragment>One</React.Fragment>
  ),
  (
    <React.Fragment>Two</React.Fragment>
  ),
];

const TestComponent = function ({ options }) {
  return <div>{options[0]}</div>;
}

it('should not output UNDEFINED nodes', () => {
  const component = shallow(
    <div><TestComponent options={arr} /></div>
  );
  expect(toJson(component)).toMatchSnapshot();
});

Snapshot:

exports[`should not output UNDEFINED nodes 1`] = `
<div>
  <TestComponent
    options={
      Array [
        <UNDEFINED>
          One
        </UNDEFINED>,
        <UNDEFINED>
          Two
        </UNDEFINED>,
      ]
    }
  />
</div>
`;

[adriantoine]

Hi @wytrych, I'll have a look at your bug as soon as I can.

[wytrych]

Thank you!

[adriantoine]

Ok so the main isssue is actually not the array but passing a fragment as a prop, this is enough to reproduce the issue:

it('should not output UNDEFINED nodes', () => {
  const component = shallow(
    <div><TestComponent options={<React.Fragment>Test</React.Fragment>} /></div>
  );
  expect(toJson(component)).toMatchSnapshot();
});

We support Fragment as children but not (yet) as props.

[adriantoine]

To follow up, I opened an issue on the Jest repository and when this PR gets merged and released, it should fix your issue.

I'll keep this issue open and close it when we can test the Jest fix and make sure it solves your issue.

[rickhanlonii]

Verified that https://github.com/facebook/jest/pull/5816 fixes the issue:

[wytrych]

That's really cool, thanks for taking it further @adriantoine

[adriantoine]

No problem, thanks @rickhanlonii for the fix!

[wytrych]

I guess we still need to wait for a new version of Jest to be released and then the package version updated here?

[adriantoine]

@wytrych you don't need to wait for a new version of enzyme-to-json just get the next Jest release which includes @rickhanlonii's fix.

[wytrych]

Ok thanks!