jest-emotion: Fix snapshots when using fragments & deep mode (#1477)

* jest-emotion: Fix snapshots when using fragments & deep mode

Fixes #1463

* Refactor how enzyme deep serializer is used in tests

* Tweak changeset description

.changeset/afraid-roses-relate/changes.json

@@ -0,0 +1 @@
+{ "releases": [{ "name": "jest-emotion", "type": "patch" }], "dependents": [] }

.changeset/afraid-roses-relate/changes.md

@@ -0,0 +1 @@
+Fixed snapshots when using Enzyme serializer and its deep mode in combination with fragments

packages/jest-emotion/src/index.js

@@ -15,6 +15,13 @@ import {
 export { matchers } from './matchers'
 
 function getNodes(node, nodes = []) {
+  if (Array.isArray(node)) {
+    for (let child of node) {
+      getNodes(child, nodes)
+    }
+    return nodes
+  }
+
   if (node.children) {
     for (let child of node.children) {
       getNodes(child, nodes)

packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap

@@ -48,6 +48,27 @@ exports[`enzyme test with prop containing css element 1`] = `
 </Greeting>
 `;
 
+exports[`enzyme test with prop containing css element in fragment 1`] = `
+.emotion-0 {
+  background-color: blue;
+}
+
+.emotion-0 {
+  background-color: blue;
+}
+
+<div>
+  Array [
+    "x",
+    <div
+      className="emotion-0"
+    >
+      y
+    </div>,
+  ]
+</div>
+`;
+
 exports[`enzyme test with prop containing css element not at the top level 1`] = `
 .emotion-0 {
   background-color: blue;

packages/jest-emotion/test/react-enzyme.test.js

@@ -4,16 +4,31 @@ import * as enzyme from 'enzyme'
 import { jsx } from '@emotion/core'
 import { createSerializer as createEnzymeSerializer } from 'enzyme-to-json'
 import { createSerializer } from 'jest-emotion'
+import { toMatchSnapshot } from 'jest-snapshot'
+import React from 'react'
+
+const createEnzymeSnapshotMatcher = serializerOptions => {
+  const serializer = createEnzymeSerializer(serializerOptions)
+  const identityPrinter = v => v
+
+  return function(val) {
+    return toMatchSnapshot.call(this, serializer.print(val, identityPrinter))
+  }
+}
 
-expect.addSnapshotSerializer(createEnzymeSerializer())
 expect.addSnapshotSerializer(createSerializer())
 
+expect.extend({
+  toMatchShallowSnapshot: createEnzymeSnapshotMatcher(),
+  toMatchDeepSnapshot: createEnzymeSnapshotMatcher({ mode: 'deep' })
+})
+
 test('enzyme mount test', () => {
   const Greeting = ({ children }) => (
     <div css={{ backgroundColor: 'red' }}>{children}</div>
   )
   const tree = enzyme.mount(<Greeting>hello</Greeting>)
-  expect(tree).toMatchSnapshot()
+  expect(tree).toMatchShallowSnapshot()
 })
 
 test('enzyme test with prop containing css element', () => {
@@ -28,7 +43,7 @@ test('enzyme test with prop containing css element', () => {
       World!
     </Greeting>
   )
-  expect(tree).toMatchSnapshot()
+  expect(tree).toMatchShallowSnapshot()
 })
 
 test('enzyme test with prop containing css element not at the top level', () => {
@@ -51,7 +66,7 @@ test('enzyme test with prop containing css element not at the top level', () =>
       </Greeting>
     </div>
   )
-  expect(tree).toMatchSnapshot()
+  expect(tree).toMatchShallowSnapshot()
 })
 
 test('enzyme test with prop containing css element with other props', () => {
@@ -72,7 +87,7 @@ test('enzyme test with prop containing css element with other props', () => {
       World!
     </Greeting>
   )
-  expect(tree).toMatchSnapshot()
+  expect(tree).toMatchShallowSnapshot()
 })
 
 test('enzyme test with prop containing css element with other label', () => {
@@ -96,5 +111,20 @@ test('enzyme test with prop containing css element with other label', () => {
       World!
     </Greeting>
   )
-  expect(tree).toMatchSnapshot()
+  expect(tree).toMatchShallowSnapshot()
+})
+
+test('enzyme test with prop containing css element in fragment', () => {
+  const FragmentComponent = () => (
+    <React.Fragment>
+      x<div css={{ backgroundColor: 'blue' }}>y</div>
+    </React.Fragment>
+  )
+
+  const tree = enzyme.mount(
+    <div>
+      <FragmentComponent />
+    </div>
+  )
+  expect(tree).toMatchDeepSnapshot()
 })