test: Fail on unexpected console.warn and console.error (#1139)

package.json

@@ -51,7 +51,9 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.6",
+    "chalk": "^4.1.2",
     "dotenv-cli": "^4.0.0",
+    "jest-diff": "^27.5.1",
     "kcd-scripts": "^11.1.0",
     "npm-run-all": "^4.1.5",
     "react": "^18.0.0",

src/__tests__/cleanup.js

@@ -51,6 +51,7 @@ describe('fake timers and missing act warnings', () => {
   })
 
   afterEach(() => {
+    jest.restoreAllMocks()
     jest.useRealTimers()
   })
 

src/__tests__/new-act.js

@@ -13,7 +13,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  console.error.mockRestore()
+  jest.restoreAllMocks()
 })
 
 test('async act works when it does not exist (older versions of react)', async () => {

src/__tests__/render.js

@@ -3,12 +3,6 @@ import ReactDOM from 'react-dom'
 import ReactDOMServer from 'react-dom/server'
 import {fireEvent, render, screen} from '../'
 
-afterEach(() => {
-  if (console.error.mockRestore !== undefined) {
-    console.error.mockRestore()
-  }
-})
-
 test('renders div into document', () => {
   const ref = React.createRef()
   const {container} = render(<div ref={ref} />)
@@ -126,7 +120,6 @@ test('can be called multiple times on the same container', () => {
 })
 
 test('hydrate will make the UI interactive', () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {})
   function App() {
     const [clicked, handleClick] = React.useReducer(n => n + 1, 0)
 
@@ -145,8 +138,6 @@ test('hydrate will make the UI interactive', () => {
 
   render(ui, {container, hydrate: true})
 
-  expect(console.error).not.toHaveBeenCalled()
-
   fireEvent.click(container.querySelector('button'))
 
   expect(container).toHaveTextContent('clicked:1')
@@ -172,26 +163,26 @@ test('hydrate can have a wrapper', () => {
 })
 
 test('legacyRoot uses legacy ReactDOM.render', () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {})
-  render(<div />, {legacyRoot: true})
-
-  expect(console.error).toHaveBeenCalledTimes(1)
-  expect(console.error).toHaveBeenNthCalledWith(
-    1,
-    "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
+  expect(() => {
+    render(<div />, {legacyRoot: true})
+  }).toErrorDev(
+    [
+      "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
+    ],
+    {withoutStack: true},
   )
 })
 
 test('legacyRoot uses legacy ReactDOM.hydrate', () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {})
   const ui = <div />
   const container = document.createElement('div')
   container.innerHTML = ReactDOMServer.renderToString(ui)
-  render(ui, {container, hydrate: true, legacyRoot: true})
-
-  expect(console.error).toHaveBeenCalledTimes(1)
-  expect(console.error).toHaveBeenNthCalledWith(
-    1,
-    "Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
+  expect(() => {
+    render(ui, {container, hydrate: true, legacyRoot: true})
+  }).toErrorDev(
+    [
+      "Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
+    ],
+    {withoutStack: true},
   )
 })

src/__tests__/renderHook.js

@@ -62,27 +62,26 @@ test('allows wrapper components', async () => {
 })
 
 test('legacyRoot uses legacy ReactDOM.render', () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {})
-
   const Context = React.createContext('default')
   function Wrapper({children}) {
     return <Context.Provider value="provided">{children}</Context.Provider>
   }
-  const {result} = renderHook(
-    () => {
-      return React.useContext(Context)
-    },
-    {
-      wrapper: Wrapper,
-      legacyRoot: true,
-    },
+  let result
+  expect(() => {
+    result = renderHook(
+      () => {
+        return React.useContext(Context)
+      },
+      {
+        wrapper: Wrapper,
+        legacyRoot: true,
+      },
+    ).result
+  }).toErrorDev(
+    [
+      "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
+    ],
+    {withoutStack: true},
   )
-
   expect(result.current).toEqual('provided')
-
-  expect(console.error).toHaveBeenCalledTimes(1)
-  expect(console.error).toHaveBeenNthCalledWith(
-    1,
-    "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
-  )
 })

tests/failOnUnexpectedConsoleCalls.js

@@ -0,0 +1,129 @@
+// Fork of https://github.com/facebook/react/blob/513417d6951fa3ff5729302b7990b84604b11afa/scripts/jest/setupTests.js#L71-L161
+/**
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+/* eslint-disable prefer-template */
+/* eslint-disable func-names */
+const util = require('util')
+const chalk = require('chalk')
+const shouldIgnoreConsoleError = require('./shouldIgnoreConsoleError')
+
+const patchConsoleMethod = (methodName, unexpectedConsoleCallStacks) => {
+  const newMethod = function (format, ...args) {
+    // Ignore uncaught errors reported by jsdom
+    // and React addendums because they're too noisy.
+    if (methodName === 'error' && shouldIgnoreConsoleError(format, args)) {
+      return
+    }
+
+    // Capture the call stack now so we can warn about it later.
+    // The call stack has helpful information for the test author.
+    // Don't throw yet though b'c it might be accidentally caught and suppressed.
+    const stack = new Error().stack
+    unexpectedConsoleCallStacks.push([
+      stack.substr(stack.indexOf('\n') + 1),
+      util.format(format, ...args),
+    ])
+  }
+
+  console[methodName] = newMethod
+
+  return newMethod
+}
+
+const isSpy = spy =>
+  (spy.calls && typeof spy.calls.count === 'function') ||
+  spy._isMockFunction === true
+
+const flushUnexpectedConsoleCalls = (
+  mockMethod,
+  methodName,
+  expectedMatcher,
+  unexpectedConsoleCallStacks,
+) => {
+  if (console[methodName] !== mockMethod && !isSpy(console[methodName])) {
+    throw new Error(
+      `Test did not tear down console.${methodName} mock properly.`,
+    )
+  }
+  if (unexpectedConsoleCallStacks.length > 0) {
+    const messages = unexpectedConsoleCallStacks.map(
+      ([stack, message]) =>
+        `${chalk.red(message)}\n` +
+        `${stack
+          .split('\n')
+          .map(line => chalk.gray(line))
+          .join('\n')}`,
+    )
+
+    const message =
+      `Expected test not to call ${chalk.bold(
+        `console.${methodName}()`,
+      )}.\n\n` +
+      'If the warning is expected, test for it explicitly by:\n' +
+      `1. Using the ${chalk.bold('.' + expectedMatcher + '()')} ` +
+      `matcher, or...\n` +
+      `2. Mock it out using ${chalk.bold(
+        'spyOnDev',
+      )}(console, '${methodName}') or ${chalk.bold(
+        'spyOnProd',
+      )}(console, '${methodName}'), and test that the warning occurs.`
+
+    throw new Error(`${message}\n\n${messages.join('\n\n')}`)
+  }
+}
+
+const unexpectedErrorCallStacks = []
+const unexpectedWarnCallStacks = []
+
+const errorMethod = patchConsoleMethod('error', unexpectedErrorCallStacks)
+const warnMethod = patchConsoleMethod('warn', unexpectedWarnCallStacks)
+
+const flushAllUnexpectedConsoleCalls = () => {
+  flushUnexpectedConsoleCalls(
+    errorMethod,
+    'error',
+    'toErrorDev',
+    unexpectedErrorCallStacks,
+  )
+  flushUnexpectedConsoleCalls(
+    warnMethod,
+    'warn',
+    'toWarnDev',
+    unexpectedWarnCallStacks,
+  )
+  unexpectedErrorCallStacks.length = 0
+  unexpectedWarnCallStacks.length = 0
+}
+
+const resetAllUnexpectedConsoleCalls = () => {
+  unexpectedErrorCallStacks.length = 0
+  unexpectedWarnCallStacks.length = 0
+}
+
+expect.extend({
+  ...require('./toWarnDev'),
+})
+
+beforeEach(resetAllUnexpectedConsoleCalls)
+afterEach(flushAllUnexpectedConsoleCalls)

tests/setup-env.js

@@ -1 +1,2 @@
 import '@testing-library/jest-dom/extend-expect'
+import './failOnUnexpectedConsoleCalls'

tests/shouldIgnoreConsoleError.js

@@ -0,0 +1,43 @@
+// Fork of https://github.com/facebook/react/blob/513417d6951fa3ff5729302b7990b84604b11afa/scripts/jest/shouldIgnoreConsoleError.js
+/**
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+
+module.exports = function shouldIgnoreConsoleError(format) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof format === 'string') {
+      if (format.indexOf('Error: Uncaught [') === 0) {
+        // This looks like an uncaught error from invokeGuardedCallback() wrapper
+        // in development that is reported by jsdom. Ignore because it's noisy.
+        return true
+      }
+      if (format.indexOf('The above error occurred') === 0) {
+        // This looks like an error addendum from ReactFiberErrorLogger.
+        // Ignore it too.
+        return true
+      }
+    }
+  }
+  // Looks legit
+  return false
+}