Jest: React Fragments have UNDEFINED types in snapshots

[adriantoine]

Do you want to request a _feature_ or report a _bug_?
Bug

What is the current behavior?
When using a snapshot test with a React Fragment The snapshot has UNDEFINED as node types.

If the current behavior is a bug, please provide the steps to reproduce and
either a repl.it demo through https://repl.it/languages/jest or a minimal
repository on GitHub that we can yarn install and yarn test.
For example:

import React from 'react';

it('doesnt render Unknown for React Fragments', () => {
  expect(
    <React.Fragment>
      <span>Hello World</span>
    </React.Fragment>,
  ).toMatchSnapshot();
});

Generates this snapshot:

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

exports[`doesnt render Unknown for React Fragments 1`] = `
<UNDEFINED>
  <span>
    Hello World
  </span>
</UNDEFINED>
`;

Here is an example repo: https://github.com/adriantoine/jest-fragment-bug (note that it's not using Enzyme or enzyme-to-json, only Jest).

What is the expected behavior?

It renders the Fragment node with the <React.Fragment>...</React.Fragment> type or an empty node type as it is possible with Babel (<>...</>).

Please provide your exact Jest configuration
It is in the example repo above and it is reproduceable with any config.

Run npx envinfo --preset jest in your project directory and paste the
results here

  System:
    OS: macOS High Sierra 10.13.1
    CPU: x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 9.7.1
    Yarn: 1.5.1
    npm: 5.7.1
  npmPackages:
    jest:
      wanted: ^22.4.2
      installed: 22.4.2

If you think that is an issue, I'm happy to look at a fix in pretty-format although we need to agree if it should be rendered as <React.Fragment>...</React.Fragment> or <>...</>.

Thanks!

[SimenB]

You need to actually render it.

diff --git c/__tests__/__snapshots__/index.js.snap w/__tests__/__snapshots__/index.js.snap
index efb0fba..6752fd8 100644
--- c/__tests__/__snapshots__/index.js.snap
+++ w/__tests__/__snapshots__/index.js.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`doesnt render Unknown for React Fragments 1`] = `
-<UNDEFINED>
-  <span>
-    Hello World
-  </span>
-</UNDEFINED>
+<span>
+  Hello World
+</span>
 `;
diff --git c/__tests__/index.js w/__tests__/index.js
index d6fd98b..5d97f53 100644
--- c/__tests__/index.js
+++ w/__tests__/index.js
@@ -1,9 +1,12 @@
 import React from 'react';
+import TestRenderer from 'react-test-renderer';

 it('doesnt render Unknown for React Fragments', () => {
   expect(
-    <React.Fragment>
-      <span>Hello World</span>
-    </React.Fragment>,
+    TestRenderer.create(
+      <React.Fragment>
+        <span>Hello World</span>
+      </React.Fragment>,
+    ).toJSON(),
   ).toMatchSnapshot();
 });
diff --git c/package.json w/package.json
index a421a45..bcabcb6 100644
--- c/package.json
+++ w/package.json
@@ -7,7 +7,8 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "jest": "^22.4.2",
-    "react": "^16.2.0"
+    "react": "^16.2.0",
+    "react-test-renderer": "^16.2.0"
   },
   "scripts": {
     "test": "jest"
diff --git c/yarn.lock w/yarn.lock
index 8d1eb7e..9a51f56 100644
--- c/yarn.lock
+++ w/yarn.lock
@@ -2936,6 +2936,14 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"

+react-test-renderer@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
+  dependencies:
+    fbjs "^0.8.16"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"

As a fragment is never rendered, it won't show up in the snapshot (stringified toJSON is { type: 'span', props: {}, children: [ 'Hello World' ] }).

If you think it should, open up an issue at the react repo.

[SimenB]

Adding another child to the fragment results in Array:

diff --git i/__tests__/__snapshots__/index.js.snap w/__tests__/__snapshots__/index.js.snap
index 6752fd8..d7bbd2a 100644
--- i/__tests__/__snapshots__/index.js.snap
+++ w/__tests__/__snapshots__/index.js.snap
@@ -1,7 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`doesnt render Unknown for React Fragments 1`] = `
-<span>
-  Hello World
-</span>
+Array [
+  <span>
+    Hello World
+  </span>,
+  <span>
+    Hello World
+  </span>,
+]
 `;
diff --git i/__tests__/index.js w/__tests__/index.js
index 5d97f53..e901901 100644
--- i/__tests__/index.js
+++ w/__tests__/index.js
@@ -6,6 +6,7 @@ it('doesnt render Unknown for React Fragments', () => {
     TestRenderer.create(
       <React.Fragment>
         <span>Hello World</span>
+        <span>Hello World</span>
       </React.Fragment>,
     ).toJSON(),
   ).toMatchSnapshot();

Not the most optimal output

[kassens]

I'm seeing this as well:

Test:

const Test = () => <>x</>;
expect(ReactTestUtils.createRenderer().render(<Test />)).toMatchSnapshot();

Produces the following snapshot:

<UNDEFINED>
  x
</UNDEFINED>

cc @cpojer (via internal discussion https://fburl.com/rmhf5kf8)

[SimenB]

@kassens do we support the intermediate representation .render returns in snapshots? All examples I can find calls toJSON() on it.

EDIT: Oh, this is using the test utils, not react-test-renderer. Are snapshots supposed to support it? It's not mentioned in the docs: https://facebook.github.io/jest/docs/en/snapshot-testing.html

[kassens]

@SimenB As far as I can tell it works for everything else. Seems like the only thing missing is for the code that prints UNDEFINED here to drop that.

[SimenB]

Fair enough 🙂 I now see we have separate plugins for test renderer and react elements, so we should support this.

[SimenB]

Fix should be here: https://github.com/facebook/jest/blob/84b17fb59c1d9fd7f964b5f2bfd9d7e2b898f89a/packages/pretty-format/src/plugins/react_element.js#L34-L42

[rickhanlonii]

Fix in flight, see above PR

[adriantoine]

Thank you for taking care of this!

[rickhanlonii]

No sweat, I checked your repo against the PR and it fixes it: