Clean up warnings in test suite

Author: jxnblk

packages/editor/test/ColorPicker.js

@@ -2,6 +2,7 @@ import React from 'react'
 import renderer from 'react-test-renderer'
 import { render, fireEvent, cleanup } from '@testing-library/react'
 import { Provider } from 'reakit/Provider'
+import mockConsole from 'jest-mock-console'
 import { ColorPicker } from '../src'
 
 const { act } = renderer
@@ -20,11 +21,16 @@ if (global.document) {
 }
 
 test('renders with styles', () => {
+  // ignore react-color dependency-related warning
+  const restore = mockConsole()
   const json = renderer.create(<ColorPicker color="#f00" />).toJSON()
   expect(json).toMatchSnapshot()
+  restore()
 })
 
 test('snapshot renders as a popover', () => {
+  // ignore react-color dependency-related warning
+  const restore = mockConsole()
   const json = renderer
     .create(
       <Provider>
@@ -35,6 +41,7 @@ test('snapshot renders as a popover', () => {
     )
     .toJSON()
   expect(json).toMatchSnapshot()
+  restore()
 })
 
 /*

packages/tachyons/test/test.js

@@ -1,6 +1,7 @@
 import 'babel-polyfill'
 
 import tachyonsGenerator from 'tachyons-generator'
+import mockConsole from 'jest-mock-console'
 import toTachyons from '../src'
 
 const theme = {
@@ -34,7 +35,10 @@ it('transforms a theme config to a Tachyons config', () => {
 })
 
 it('generates the proper config for the Tachyons generator', async () => {
+  // ignore warnings
+  const restore = mockConsole()
   const { css: result } = await tachyonsGenerator(toTachyons(theme)).generate()
 
   expect(result).toMatchSnapshot()
+  restore()
 })

packages/theme-ui/test/color-modes.js

@@ -61,6 +61,11 @@ test('renders with initial color mode name', () => {
       <ThemeProvider
         theme={{
           initialColorModeName: 'light',
+          colors: {
+            modes: {
+              dark: {},
+            }
+          }
         }}>
         <Mode />
       </ThemeProvider>
@@ -204,6 +209,11 @@ test('inherits color mode state from parent context', () => {
     <ThemeProvider
       theme={{
         initialColorModeName: 'outer',
+        colors: {
+          modes: {
+            dark: {},
+          }
+        }
       }}>
       <ThemeProvider
         theme={{
@@ -337,6 +347,7 @@ test('ColorMode component renders with colors', () => {
 })
 
 test('useColorMode throws when there is no theme context', () => {
+  const restore = mockConsole()
   expect(() => {
     const Consumer = props => {
       const [colorMode] = useColorMode('beep')
@@ -345,6 +356,8 @@ test('useColorMode throws when there is no theme context', () => {
     }
     render(<Consumer />)
   }).toThrow()
+  expect(console.error).toHaveBeenCalled()
+  restore()
 })
 
 test('useThemeUI returns current color mode colors', () => {
@@ -378,7 +391,6 @@ test('useThemeUI returns current color mode colors', () => {
 
 test('warns when initialColorModeName matches a key in theme.colors.modes', () => {
   const restore = mockConsole()
-  // jest.spyOn(global.console, 'warn')
   const root = render(
     <ThemeProvider
       theme={{

packages/theme-ui/test/index.js

@@ -3,6 +3,7 @@ import { mdx } from '@mdx-js/react'
 import { useContext } from 'react'
 import renderer from 'react-test-renderer'
 import { matchers } from 'jest-emotion'
+import mockConsole from 'jest-mock-console'
 import { ThemeProvider, Context, Styled, jsx, useColorMode } from '../src/index'
 
 expect.extend(matchers)
@@ -122,7 +123,7 @@ test('custom pragma adds styles', () => {
 })
 
 test('warns when multiple versions of emotion are installed', () => {
-  jest.spyOn(global.console, 'warn')
+  const restore = mockConsole()
   const json = renderJSON(
     <Context.Provider
       value={{
@@ -132,6 +133,7 @@ test('warns when multiple versions of emotion are installed', () => {
     </Context.Provider>
   )
   expect(console.warn).toBeCalled()
+  restore()
 })
 
 test('functional themes receive outer theme', () => {