adjust tests

emotion-js · Jul 13, 2021 · e4b23f3 · e4b23f3
1 parent 4166414
commit e4b23f3
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 223 deletions.
diff --git a/packages/react/__tests__/element.js b/packages/react/__tests__/element.js
@@ -4,9 +4,9 @@ import 'test-utils/dev-mode'
 import { render } from 'react-dom'
 import { Global, jsx, css, CacheProvider, ThemeProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
-import * as serialize from '@emotion/serialize'
 
-let serializeStyles
+// $FlowFixMe
+console.error = jest.fn()
 
 beforeEach(() => {
   // $FlowFixMe
@@ -15,112 +15,58 @@ beforeEach(() => {
   document.body.innerHTML = `<div id="root"></div>`
 
   jest.clearAllMocks()
-  serializeStyles = jest.spyOn(serialize, 'serializeStyles')
 })
 
-describe('EmotionElement serializeStyles', () => {
-  test('basic', () => {
-    const theme = {}
+test('React hook ', () => {
+  const theme = { color: 'blue' }
+  const cache = createCache({ key: 'context' })
 
-    // intentionally not using `css` here as it invokes `serializeStyles`
-    render(
-      <ThemeProvider theme={theme}>
-        <CacheProvider value={createCache({ key: 'context' })}>
-          <div css={{ display: 'block' }} />
-        </CacheProvider>
-      </ThemeProvider>,
-      // $FlowFixMe
-      document.getElementById('root')
-    )
-
-    expect(serializeStyles).toHaveBeenNthCalledWith(
-      1,
-      expect.any(Array),
-      undefined,
-      theme
-    )
-  })
-
-  test('basic css', () => {
-    const theme = {}
-
-    // intentionally not using `css` here as it invokes `serializeStyles`
-    render(
-      <ThemeProvider theme={theme}>
-        <CacheProvider value={createCache({ key: 'context' })}>
-          <div
-            css={css`
-              display: block;
-            `}
-          />
-        </CacheProvider>
-      </ThemeProvider>,
-      // $FlowFixMe
-      document.getElementById('root')
-    )
-
-    expect(serializeStyles).toHaveBeenNthCalledWith(
-      2,
-      expect.any(Array),
-      undefined,
-      theme
-    )
-  })
-
-  test('array no theme', () => {
-    const theme = { color: 'blue' }
-
-    render(
-      <ThemeProvider theme={theme}>
-        <CacheProvider value={createCache({ key: 'context' })}>
-          <div
-            css={[
-              { display: 'block' },
-              css`
-                color: blue;
-              `
-            ]}
-          />
-        </CacheProvider>
-      </ThemeProvider>,
-      // $FlowFixMe
-      document.getElementById('root')
-    )
+  // $FlowFixMe
+  const Comp = ({ flag }) => (
+    <ThemeProvider theme={theme}>
+      <CacheProvider value={cache}>
+        <Global
+          styles={
+            flag &&
+            (t => css`
+              color: ${t.color};
+            `)
+          }
+        />
+      </CacheProvider>
+    </ThemeProvider>
+  )
 
-    expect(serializeStyles).toHaveBeenNthCalledWith(
-      2, // 2 as `css` is the first invocation
-      expect.any(Array),
-      undefined,
-      theme
-    )
-  })
+  render(<Comp />, document.getElementById('root'))
+  expect(console.error).not.toHaveBeenCalled()
+  render(<Comp flag />, document.getElementById('root'))
+  expect(console.error).not.toHaveBeenCalled()
+})
 
-  test('array theme', () => {
+describe('EmotionElement', () => {
+  test('no React hook order violations', () => {
     const theme = { color: 'blue' }
+    const cache = createCache({ key: 'context' })
 
-    render(
+    // $FlowFixMe
+    const Comp = ({ flag }) => (
       <ThemeProvider theme={theme}>
-        <CacheProvider value={createCache({ key: 'context' })}>
+        <CacheProvider value={cache}>
           <div
-            css={[
-              { display: 'block' },
-              t =>
-                css`
-                  color: ${t.color};
-                `
-            ]}
+            css={
+              flag &&
+              (t => css`
+                color: ${t.color};
+              `)
+            }
           />
         </CacheProvider>
-      </ThemeProvider>,
-      // $FlowFixMe
-      document.getElementById('root')
+      </ThemeProvider>
     )
 
-    expect(serializeStyles).toHaveBeenNthCalledWith(
-      1, // 1 as `css` is lazily invoked so Global's invocation the first
-      expect.any(Array),
-      undefined,
-      theme
-    )
+    render(<Comp />, document.getElementById('root'))
+    expect(console.error).not.toHaveBeenCalled()
+    render(<Comp flag />, document.getElementById('root'))
+    expect(console.error).not.toHaveBeenCalled()
   })
 })
diff --git a/packages/react/__tests__/global-context.js b/packages/react/__tests__/global-context.js
diff --git a/packages/react/__tests__/global.js b/packages/react/__tests__/global.js
@@ -2,14 +2,25 @@
 import 'test-utils/dev-mode'
 import * as React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
-import { Global, keyframes, css, CacheProvider } from '@emotion/react'
+import {
+  Global,
+  keyframes,
+  css,
+  CacheProvider,
+  ThemeProvider
+} from '@emotion/react'
 import createCache from '@emotion/cache'
 
+// $FlowFixMe
+console.error = jest.fn()
+
 beforeEach(() => {
   // $FlowFixMe
   document.head.innerHTML = ''
   // $FlowFixMe
   document.body.innerHTML = `<div id="root"></div>`
+
+  jest.resetAllMocks()
 })
 
 test('basic', () => {
@@ -67,3 +78,29 @@ test('updating more than 1 global rule', () => {
   renderComponent({ background: 'gray', color: 'white' })
   expect(document.head).toMatchSnapshot()
 })
+
+test('no React hook order violations', () => {
+  const theme = { color: 'blue' }
+  const cache = createCache({ key: 'context' })
+
+  // $FlowFixMe
+  const Comp = ({ flag }) => (
+    <ThemeProvider theme={theme}>
+      <CacheProvider value={cache}>
+        <Global
+          styles={
+            flag &&
+            (t => css`
+              color: ${t.color};
+            `)
+          }
+        />
+      </CacheProvider>
+    </ThemeProvider>
+  )
+
+  render(<Comp />, document.getElementById('root'))
+  expect(console.error).not.toHaveBeenCalled()
+  render(<Comp flag />, document.getElementById('root'))
+  expect(console.error).not.toHaveBeenCalled()
+})