Fixed @emotion/jest toHaveStyleRule on react.elements (#1902)

Co-authored-by: Meno Abels <meno.abels@adviser.com>

.changeset/tiny-eels-shout.md

@@ -0,0 +1,5 @@
+---
+'@emotion/jest': patch
+---
+
+Added support for handling regular React **elements** (objects returned from `React.createElement`) in the serializer and `toHaveStyleRule` matcher. It's possible to get those elements when traversing Enzyme's trees.

packages/jest/src/utils.js

@@ -77,7 +77,10 @@ function getClassNamesFromDOMElement(selectors, node: any) {
 }
 
 export function isReactElement(val: any): boolean {
-  return val.$$typeof === Symbol.for('react.test.json')
+  return (
+    val.$$typeof === Symbol.for('react.test.json') ||
+    val.$$typeof === Symbol.for('react.element')
+  )
 }
 
 export function isEmotionCssPropElementType(val: any): boolean {
@@ -115,12 +118,12 @@ function isCheerioElement(val: any): boolean {
 
 export function getClassNamesFromNodes(nodes: Array<any>) {
   return nodes.reduce((selectors, node) => {
-    if (isReactElement(node)) {
-      return getClassNamesFromTestRenderer(selectors, node)
-    } else if (isEnzymeElement(node)) {
+    if (isEnzymeElement(node)) {
       return getClassNamesFromEnzyme(selectors, node)
     } else if (isCheerioElement(node)) {
       return getClassNamesFromCheerio(selectors, node)
+    } else if (isReactElement(node)) {
+      return getClassNamesFromTestRenderer(selectors, node)
     }
     return getClassNamesFromDOMElement(selectors, node)
   }, [])

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

@@ -8,8 +8,10 @@ import styled from '@emotion/styled'
 import React from 'react'
 import toJson from 'enzyme-to-json'
 
+import { matchers } from '@emotion/jest'
 import * as serializer from '@emotion/jest/enzyme-serializer'
 
+expect.extend(matchers)
 expect.addSnapshotSerializer(serializer)
 
 const cases = {
@@ -198,4 +200,16 @@ describe('enzyme', () => {
 
     expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot()
   })
+
+  test('toHaveStyleRule on react.element', () => {
+    const tree = enzyme.mount(
+      <ul>
+        <li css={{ backgroundColor: 'hotpink' }}>hello</li>
+      </ul>
+    )
+    expect(tree.find('li').get(0)).toHaveStyleRule(
+      'background-color',
+      'hotpink'
+    )
+  })
 })