tweak

Author: Andarist

packages/jest/src/matchers.js

@@ -44,6 +44,11 @@ function toHaveStyleRule(
   value,
   options /* ?: { target?: string | RegExp, media?: string } */ = {}
 ) {
+  if (Array.isArray(received)) {
+    throw new Error(
+      '`toHaveStyleRule` expects to receive a single element but it received an array.'
+    )
+  }
   const { target, media } = options
   const classNames = getClassNamesFromNodes([received])
   const cssString = getStylesFromClassNames(classNames, getStyleElements())

packages/jest/src/utils.js

@@ -100,9 +100,6 @@ function getClassNamesFromCheerio(selectors, node) {
 }
 
 function getClassNamesFromDOMElement(selectors, node) {
-  if (!isDOMElement(node)) {
-    throw new Error('`toHaveStyleRule` expects to receive an element.')
-  }
   return getClassNames(selectors, node.getAttribute('class'))
 }
 

packages/jest/test/__snapshots__/printer.test.js.snap

@@ -40,10 +40,10 @@ exports[`jest-emotion with DOM elements disabled replaces class names and insert
 }
 
 <div
-  class="emotion-0"
+  className="emotion-0"
 >
   <svg
-    class="emotion-1"
+    className="emotion-1"
   />
 </div>"
 `;
@@ -76,10 +76,10 @@ exports[`jest-emotion with dom elements replaces class names and inserts styles
 }
 
 <div
-  class="emotion-0"
+  className="emotion-0"
 >
   <svg
-    class="emotion-1"
+    className="emotion-1"
   />
 </div>"
 `;

packages/jest/test/matchers.test.js

@@ -1,7 +1,9 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import { render } from '@testing-library/react'
+import * as testRenderer from 'react-test-renderer'
 import { css, jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 import { matchers } from '@emotion/jest'
@@ -292,11 +294,26 @@ describe('toHaveStyleRule', () => {
     expect(container.firstChild.firstChild).toHaveStyleRule('color', 'hotpink')
   })
 
-  test('should throw a friendly error when it receives non-element', () => {
+  test('should throw a friendly error when it receives an array', async () => {
+    const tree = (
+      await act(() =>
+        testRenderer.create(
+          <>
+            <div
+              css={css`
+                color: hotpink;
+              `}
+            />
+            {'Some text'}
+          </>
+        )
+      )
+    ).toJSON()
+
     expect(() =>
-      expect([]).toHaveStyleRule('color', 'hotpink')
+      expect(tree).toHaveStyleRule('color', 'hotpink')
     ).toThrowErrorMatchingInlineSnapshot(
-      `"\`toHaveStyleRule\` expects to receive an element."`
+      `"\`toHaveStyleRule\` expects to receive a single element but it received an array."`
     )
   })
 })

packages/jest/test/printer.test.js

@@ -1,11 +1,13 @@
-import React from 'react'
+/** @jsx jsx */
 import 'test-utils/setup-env'
+import React from 'react'
+import { act } from 'react'
 import prettyFormat from 'pretty-format'
-/** @jsx jsx */
 import { css, jsx, CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { createSerializer } from '@emotion/jest'
 import { render } from '@testing-library/react'
+import * as testRenderer from 'react-test-renderer'
 import { ignoreConsoleErrors } from 'test-utils'
 
 let emotionPlugin = createSerializer()
@@ -21,14 +23,18 @@ describe('jest-emotion with dom elements', () => {
     width: 100%;
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
-    const { container } = render(
-      <div css={divStyle}>
-        <svg css={svgStyle} />
-      </div>
-    )
-
-    const output = prettyFormat(container.firstChild, {
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = (
+      await act(() =>
+        testRenderer.create(
+          <div css={divStyle}>
+            <svg css={svgStyle} />
+          </div>
+        )
+      )
+    ).toJSON()
+
+    const output = prettyFormat(tree, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
     })
 
@@ -62,21 +68,23 @@ describe('jest-emotion with DOM elements disabled', () => {
     width: 100%;
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
-    const { container } = render(
-      <div css={divStyle}>
-        <svg css={svgStyle} />
-      </div>
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = await act(() =>
+      testRenderer.create(
+        <div css={divStyle}>
+          <svg css={svgStyle} />
+        </div>
+      )
     )
 
-    const output = prettyFormat(container.firstChild, {
+    const output = prettyFormat(tree.toJSON(), {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
     })
 
     expect(output).toMatchSnapshot()
   })
 
-  test('does not replace class names or insert styles into DOM element snapshots', () => {
+  test('does not replace class names or insert styles into DOM element snapshots', async () => {
     const divRef = React.createRef()
     render(
       <div css={divStyle} ref={divRef}>
@@ -143,7 +151,29 @@ describe('jest-emotion with nested selectors', () => {
     }
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = (
+      await act(() => testRenderer.create(<div css={divStyle} />))
+    ).toJSON()
+
+    const output = prettyFormat(tree, {
+      plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
+    })
+
+    expect(output).toBe(`.emotion-0 {
+  color: blue;
+}
+
+header .emotion-0 {
+  color: red;
+}
+
+<div
+  className="emotion-0"
+/>`)
+  })
+
+  test('replaces class names and inserts styles into DOM element snapshots', () => {
     const { container } = render(<div css={divStyle} />)
 
     const output = prettyFormat(container.firstChild, {