diff --git a/packages/react/__tests__/element.js b/packages/react/__tests__/element.js
index 75e68057b2..57f79b2147 100644
--- 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
deleted file mode 100644
index 41911caaf9..0000000000
--- a/packages/react/__tests__/global-context.js
+++ /dev/null
@@ -1,126 +0,0 @@
-// @flow
-import 'test-utils/dev-mode'
-import React from 'react'
-import { render } from 'react-dom'
-import { Global, css, CacheProvider, ThemeProvider } from '@emotion/react'
-import createCache from '@emotion/cache'
-import * as serialize from '@emotion/serialize'
-
-let serializeStyles
-
-beforeEach(() => {
-  // $FlowFixMe
-  document.head.innerHTML = ''
-  // $FlowFixMe
-  document.body.innerHTML = `<div id="root"></div>`
-
-  jest.clearAllMocks()
-  serializeStyles = jest.spyOn(serialize, 'serializeStyles')
-})
-
-describe('Global serializeStyles', () => {
-  test('basic', () => {
-    const theme = {}
-
-    // intentionally not using `css` here as it invokes `serializeStyles`
-    render(
-      <ThemeProvider theme={theme}>
-        <CacheProvider value={createCache({ key: 'context' })}>
-          <Global styles={{ 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' })}>
-          <Global
-            styles={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' })}>
-          <Global
-            styles={[
-              { display: 'block' },
-              css`
-                color: blue;
-              `
-            ]}
-          />
-        </CacheProvider>
-      </ThemeProvider>,
-      // $FlowFixMe
-      document.getElementById('root')
-    )
-
-    expect(serializeStyles).toHaveBeenNthCalledWith(
-      2, // 2 as `css` is the first invocation
-      expect.any(Array),
-      undefined,
-      theme
-    )
-  })
-
-  test('array theme', () => {
-    const theme = { color: 'blue' }
-
-    render(
-      <ThemeProvider theme={theme}>
-        <CacheProvider value={createCache({ key: 'context' })}>
-          <Global
-            styles={[
-              { display: 'block' },
-              t =>
-                css`
-                  color: ${t.color};
-                `
-            ]}
-          />
-        </CacheProvider>
-      </ThemeProvider>,
-      // $FlowFixMe
-      document.getElementById('root')
-    )
-
-    expect(serializeStyles).toHaveBeenNthCalledWith(
-      1, // 1 as `css` is lazily invoked so Global's invocation the first
-      expect.any(Array),
-      undefined,
-      theme
-    )
-  })
-})
diff --git a/packages/react/__tests__/global.js b/packages/react/__tests__/global.js
index 6e88b27042..a624da805f 100644
--- 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()
+})