Fragment -> Noop

packages/jest/src/utils.js

@@ -62,7 +62,7 @@ function getClassNamesFromEnzyme(selectors, nodeWithFragment) {
   // TODO: Does approach work with older Emotion versions? Does it cause false positives with components named "Fragment" that aren't `React.Fragment`?
   const node =
     nodeWithFragment.name() === 'Fragment'
-      ? nodeWithFragment.children()
+      ? nodeWithFragment.children().at(1)
       : nodeWithFragment
   // We need to dive in to get the className if we have a styled element from a shallow render
   const isShallow = shouldDive(node)

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

@@ -48,6 +48,7 @@ exports[`enzyme mount displayName 1`] = `
 
 exports[`enzyme mount empty styled 1`] = `
 <Greeting>
+  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
@@ -97,6 +98,7 @@ exports[`enzyme mount nested styled 1`] = `
 
 <div>
   <Greeting>
+    <Noop />
     <div
       className="emotion-0 emotion-1"
     >
@@ -120,6 +122,7 @@ exports[`enzyme mount nested styled with css prop 1`] = `
   <Button
     className="emotion-0"
   >
+    <Noop />
     <button
       className="emotion-1 emotion-2"
     >
@@ -135,6 +138,7 @@ exports[`enzyme mount styled 1`] = `
 }
 
 <Greeting>
+  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
@@ -156,6 +160,7 @@ exports[`enzyme mount styled with css prop 1`] = `
 <Button
   className="emotion-0"
 >
+  <Noop />
   <button
     className="emotion-1 emotion-2"
   >
@@ -178,6 +183,7 @@ exports[`enzyme mount theming 1`] = `
       }
     }
   >
+    <Noop />
     <button
       className="emotion-0 emotion-1"
     >
@@ -198,6 +204,7 @@ exports[`enzyme mount theming 1`] = `
         }
       }
     >
+      <Noop />
       <button
         className="emotion-0 emotion-1"
       >
@@ -447,6 +454,7 @@ exports[`enzyme shallow displayName 1`] = `
 
 exports[`enzyme shallow empty styled 1`] = `
 <Fragment>
+  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
@@ -503,6 +511,7 @@ exports[`enzyme shallow styled 1`] = `
 }
 
 <Fragment>
+  <Noop />
   <div
     className="emotion-0 emotion-1"
   >

packages/styled/src/base.js

@@ -18,6 +18,7 @@ You can read more about this here:
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
 
 let isBrowser = typeof document !== 'undefined'
+const Noop = () => null
 
 let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -132,7 +133,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
         newProps.ref = ref
 
         const ele = React.createElement(finalTag, newProps)
-        let possiblyStyleElement = <></>
+        let possiblyStyleElement = <Noop />
         if (!isBrowser && rules !== undefined) {
           let serializedNames = serialized.name
           let next = serialized.next