Revert improved support for Enzyme's shallow rendering (#1667)

* Revert "Fix printing names of nested shallow-rendered components (#1665)" This reverts commit 9328cd7. * Revert "Improve support for Enzyme's shallow rendering (#1648)" This reverts commit 858c6e7. * add changeset
emotion-js · Dec 2, 2019 · b3c5b8d · b3c5b8d
1 parent 9328cd7
commit b3c5b8d
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 366 deletions.
diff --git a/.changeset/great-bears-sing.md b/.changeset/great-bears-sing.md
diff --git a/.changeset/thin-suits-pull.md b/.changeset/thin-suits-pull.md
@@ -0,0 +1,5 @@
+---
+'jest-emotion': patch
+---
+
+Revert improved support for Enzyme's shallow rendering - its release was an unforseen breaking change.
diff --git a/packages/jest-emotion/src/index.js b/packages/jest-emotion/src/index.js
@@ -9,8 +9,7 @@ import {
   isDOMElement,
   getStylesFromClassNames,
   getStyleElements,
-  getKeys,
-  flatMap
+  getKeys
 } from './utils'
 
 export { matchers } from './matchers'
@@ -70,54 +69,14 @@ function filterEmotionProps(props = {}) {
   return rest
 }
 
-function hasIntersection(left: any[], right: any[]) {
-  return left.some(value => right.includes(value))
-}
-
-function isShallowEnzymeElement(element, classNames) {
-  const delimiter = ' '
-  let childClassNames = flatMap(element.children || [], ({ props = {} }) =>
-    (props.className || '').split(delimiter)
-  ).filter(Boolean)
-
-  return !hasIntersection(classNames, childClassNames)
-}
-
 export function createSerializer({
   classNameReplacer,
   DOMElements = true
 }: Options = {}) {
   let cache = new WeakSet()
   function print(val: *, printer: Function) {
-    let elements = getStyleElements()
-    let keys = getKeys(elements)
     if (isEmotionCssPropEnzymeElement(val)) {
-      let cssClassNames = (val.props.css.name || '').split(' ')
-      let expectedClassNames = flatMap(cssClassNames, cssClassName =>
-        keys.map(key => `${key}-${cssClassName}`)
-      )
-      // if this is a shallow element, we need to manufacture the className
-      // since the underlying component is not rendered.
-      if (isShallowEnzymeElement(val, expectedClassNames)) {
-        let className = [val.props.className]
-          .concat(expectedClassNames)
-          .filter(Boolean)
-          .join(' ')
-        let emotionType = val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
-        // emotionType will be a string for DOM elements
-        let type =
-          typeof emotionType === 'string' ? emotionType : emotionType.name
-        return printer({
-          ...val,
-          props: filterEmotionProps({
-            ...val.props,
-            className
-          }),
-          type
-        })
-      } else {
-        return val.children.map(printer).join('\n')
-      }
+      return val.children.map(printer).join('\n')
     }
     if (isEmotionCssPropElementType(val)) {
       return printer({
@@ -128,10 +87,12 @@ export function createSerializer({
     }
     const nodes = getNodes(val)
     const classNames = getClassNamesFromNodes(nodes)
+    let elements = getStyleElements()
     const styles = getPrettyStylesFromClassNames(classNames, elements)
     nodes.forEach(cache.add, cache)
     const printedVal = printer(val)
     nodes.forEach(cache.delete, cache)
+    let keys = getKeys(elements)
     return replaceClassNames(
       classNames,
       styles,

diff --git a/packages/jest-emotion/src/utils.js b/packages/jest-emotion/src/utils.js
@@ -1,6 +1,6 @@
 // @flow
 
-export function flatMap<T, S>(arr: T[], iteratee: (arg: T) => S[] | S): S[] {
+function flatMap(arr, iteratee) {
   return [].concat(...arr.map(iteratee))
 }
 
@@ -25,23 +25,14 @@ function isTagWithClassName(node) {
   return node.prop('className') && typeof node.type() === 'string'
 }
 
-function findNodeWithClassName(node) {
+function getClassNamesFromEnzyme(selectors, node) {
+  // We need to dive if we have selected a styled child from a shallow render
+  const actualComponent = shouldDive(node) ? node.dive() : node
   // Find the first node with a className prop
-  const found = node.findWhere(isTagWithClassName)
-  return found.length ? found.first() : null
-}
-
-function getClassNameProp(node) {
-  return (node && node.prop('className')) || ''
-}
+  const components = actualComponent.findWhere(isTagWithClassName)
+  const classes = components.length && components.first().prop('className')
 
-function getClassNamesFromEnzyme(selectors, node) {
-  // We need to dive in to get the className if we have a styled element from a shallow render
-  let isShallow = shouldDive(node)
-  let nodeWithClassName = findNodeWithClassName(
-    isShallow ? node.dive().dive() : node
-  )
-  return getClassNames(selectors, getClassNameProp(nodeWithClassName))
+  return getClassNames(selectors, classes)
 }
 
 function getClassNamesFromCheerio(selectors, node) {
@@ -142,7 +133,7 @@ export function getStylesFromClassNames(
   let keyframes = {}
   let styles = ''
 
-  flatMap(elements, getElementRules).forEach((rule: string) => {
+  flatMap(elements, getElementRules).forEach(rule => {
     if (selectorPattern.test(rule)) {
       styles += rule
     }

diff --git a/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`enzyme mount basic 1`] = `
+exports[`enzyme mount test 1`] = `
 .emotion-0 {
   background-color: red;
 }
@@ -18,29 +18,7 @@ exports[`enzyme mount basic 1`] = `
 </Greeting>
 `;
 
-exports[`enzyme mount nested 1`] = `
-.emotion-0 {
-  background-color: red;
-}
-
-.emotion-0 {
-  background-color: red;
-}
-
-<div>
-  <Greeting
-    className="emotion-0"
-  >
-    <div
-      className="emotion-0"
-    >
-      Hello
-    </div>
-  </Greeting>
-</div>
-`;
-
-exports[`enzyme mount with prop containing css element 1`] = `
+exports[`enzyme test with prop containing css element 1`] = `
 .emotion-0 {
   background-color: blue;
 }
@@ -70,7 +48,28 @@ exports[`enzyme mount with prop containing css element 1`] = `
 </Greeting>
 `;
 
-exports[`enzyme mount with prop containing css element not at the top level 1`] = `
+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;
 }
@@ -104,7 +103,7 @@ exports[`enzyme mount with prop containing css element not at the top level 1`]
 </div>
 `;
 
-exports[`enzyme mount with prop containing css element with other label 1`] = `
+exports[`enzyme test with prop containing css element with other label 1`] = `
 .emotion-0 {
   background-color: blue;
 }
@@ -142,7 +141,7 @@ exports[`enzyme mount with prop containing css element with other label 1`] = `
 </Greeting>
 `;
 
-exports[`enzyme mount with prop containing css element with other props 1`] = `
+exports[`enzyme test with prop containing css element with other props 1`] = `
 .emotion-0 {
   background-color: blue;
 }
@@ -173,108 +172,3 @@ exports[`enzyme mount with prop containing css element with other props 1`] = `
   </div>
 </Greeting>
 `;
-
-exports[`enzyme shallow basic 1`] = `
-<div
-  className=""
-  css="unknown styles"
->
-  hello
-</div>
-`;
-
-exports[`enzyme shallow nested 1`] = `
-<div>
-  <Greeting
-    className=""
-    css="unknown styles"
-  >
-    Hello
-  </Greeting>
-</div>
-`;
-
-exports[`enzyme shallow with prop containing css element 1`] = `
-<div>
-  <p
-    className=""
-    css="unknown styles"
-  >
-    Hello
-  </p>
-   
-  World!
-</div>
-`;
-
-exports[`enzyme shallow with prop containing css element not at the top level 1`] = `
-<div>
-  <Greeting
-    content={
-      <p
-        css="unknown styles"
-        id="something"
-      >
-        Hello
-      </p>
-    }
-  >
-    World!
-  </Greeting>
-</div>
-`;
-
-exports[`enzyme shallow with prop containing css element with other label 1`] = `
-<Thing
-  content={
-    <div
-      css="unknown styles"
-    />
-  }
->
-  <p
-    className=""
-    css="unknown styles"
-    id="something"
-  >
-    Hello
-  </p>
-   
-  World!
-</Thing>
-`;
-
-exports[`enzyme shallow with prop containing css element with other props 1`] = `
-<div>
-  <p
-    className=""
-    css="unknown styles"
-    id="something"
-  >
-    Hello
-  </p>
-   
-  World!
-</div>
-`;
-
-exports[`enzyme 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>
-`;