Skip to content

Commit

Permalink
test: Fail on unexpected console.warn and console.error (#1139)
Browse files Browse the repository at this point in the history
  • Loading branch information
eps1lon authored Dec 6, 2022
1 parent 185e314 commit 801ad37
Show file tree
Hide file tree
Showing 9 changed files with 510 additions and 41 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/cleanup.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ describe('fake timers and missing act warnings', () => {
})

afterEach(() => {
jest.restoreAllMocks()
jest.useRealTimers()
})

Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/new-act.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
37 changes: 14 additions & 23 deletions src/__tests__/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -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} />)
Expand Down Expand Up @@ -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)

Expand All @@ -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')
Expand All @@ -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},
)
})
33 changes: 16 additions & 17 deletions src/__tests__/renderHook.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
)
})
129 changes: 129 additions & 0 deletions tests/failOnUnexpectedConsoleCalls.js
Original file line number Diff line number Diff line change
@@ -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)
1 change: 1 addition & 0 deletions tests/setup-env.js
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
import '@testing-library/jest-dom/extend-expect'
import './failOnUnexpectedConsoleCalls'
43 changes: 43 additions & 0 deletions tests/shouldIgnoreConsoleError.js
Original file line number Diff line number Diff line change
@@ -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
}
Loading

0 comments on commit 801ad37

Please sign in to comment.