Skip to content

fix: reduce console.error suppressions to only while acting #542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 48 additions & 1 deletion src/dom/__tests__/errorHook.test.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'
import { renderHook } from '..'
import { renderHook, act } from '..'

describe('error hook tests', () => {
function useError(throwError?: boolean) {
Expand Down Expand Up @@ -142,4 +142,51 @@ describe('error hook tests', () => {
expect(result.error).toBe(undefined)
})
})

describe('error output suppression', () => {
test('should allow console.error to be mocked', async () => {
const consoleError = console.error
console.error = jest.fn()

try {
const { rerender, unmount } = renderHook(
(stage) => {
useEffect(() => {
console.error(`expected in effect`)
return () => {
console.error(`expected in unmount`)
}
}, [])
console.error(`expected in ${stage}`)
},
{
initialProps: 'render'
}
)

act(() => {
console.error('expected in act')
})

await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 100))
console.error('expected in async act')
})

rerender('rerender')

unmount()

expect(console.error).toBeCalledWith('expected in render')
expect(console.error).toBeCalledWith('expected in effect')
expect(console.error).toBeCalledWith('expected in act')
expect(console.error).toBeCalledWith('expected in async act')
expect(console.error).toBeCalledWith('expected in rerender')
expect(console.error).toBeCalledWith('expected in unmount')
expect(console.error).toBeCalledTimes(6)
} finally {
console.error = consoleError
}
})
})
})
7 changes: 5 additions & 2 deletions src/dom/pure.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import ReactDOM from 'react-dom'
import { act } from 'react-dom/test-utils'
import { act as baseAct } from 'react-dom/test-utils'

import { RendererProps, RendererOptions } from '../types/react'
import { RendererProps, RendererOptions, Act } from '../types/react'

import { createRenderHook } from '../core'
import { createActWrapper } from '../helpers/act'
import { createTestHarness } from '../helpers/createTestHarness'

const act = createActWrapper(baseAct)

function createDomRenderer<TProps, TResult>(
rendererProps: RendererProps<TProps, TResult>,
{ wrapper }: RendererOptions<TProps>
Expand Down
26 changes: 26 additions & 0 deletions src/helpers/act.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Act } from '../types/react'

import { suppressErrorOutput } from './console'

import { isPromise } from './promises'

function createActWrapper(baseAct: Act) {
const act: Act = async (callback: () => unknown) => {
const restoreOutput = suppressErrorOutput()
try {
let awaitRequired = false
const actResult = baseAct(() => {
const callbackResult = callback()
awaitRequired = isPromise(callbackResult)
return callbackResult as Promise<void>
})
return awaitRequired ? await actResult : undefined
} finally {
restoreOutput()
}
}

return act
}

export { createActWrapper }
22 changes: 22 additions & 0 deletions src/helpers/console.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import filterConsole from 'filter-console'

function suppressErrorOutput() {
// The error output from error boundaries is notoriously difficult to suppress. To save
// our users from having to work it out, we crudely suppress the output matching the patterns
// below. For more information, see these issues:
// - https://github.com/testing-library/react-hooks-testing-library/issues/50
// - https://github.com/facebook/react/issues/11098#issuecomment-412682721
// - https://github.com/facebook/react/issues/15520
// - https://github.com/facebook/react/issues/18841
return filterConsole(
[
/^The above error occurred in the <TestComponent> component:/, // error boundary output
/^Error: Uncaught .+/ // jsdom output
],
{
methods: ['error']
}
)
}

export { suppressErrorOutput }
25 changes: 0 additions & 25 deletions src/helpers/createTestHarness.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,8 @@
import React, { Suspense } from 'react'
import { ErrorBoundary, FallbackProps } from 'react-error-boundary'
import filterConsole from 'filter-console'

import { addCleanup } from '../core'

import { RendererProps, WrapperComponent } from '../types/react'

function suppressErrorOutput() {
// The error output from error boundaries is notoriously difficult to suppress. To save
// out users from having to work it out, we crudely suppress the output matching the patterns
// below. For more information, see these issues:
// - https://github.com/testing-library/react-hooks-testing-library/issues/50
// - https://github.com/facebook/react/issues/11098#issuecomment-412682721
// - https://github.com/facebook/react/issues/15520
// - https://github.com/facebook/react/issues/18841
const removeConsoleFilter = filterConsole(
[
/^The above error occurred in the <TestComponent> component:/, // error boundary output
/^Error: Uncaught .+/ // jsdom output
],
{
methods: ['error']
}
)
addCleanup(removeConsoleFilter)
}

function createTestHarness<TProps, TResult>(
{ callback, setValue, setError }: RendererProps<TProps, TResult>,
Wrapper?: WrapperComponent<TProps>,
Expand All @@ -47,8 +24,6 @@ function createTestHarness<TProps, TResult>(
return null
}

suppressErrorOutput()

const testHarness = (props?: TProps) => {
resetErrorBoundary()

Expand Down
6 changes: 5 additions & 1 deletion src/helpers/promises.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,8 @@ async function callAfter(callback: () => void, ms: number) {
callback()
}

export { resolveAfter, callAfter }
function isPromise<T>(value: unknown): boolean {
return value !== undefined && typeof (value as PromiseLike<T>).then === 'function'
}

export { resolveAfter, callAfter, isPromise }
49 changes: 48 additions & 1 deletion src/native/__tests__/errorHook.test.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'
import { renderHook } from '..'
import { renderHook, act } from '..'

describe('error hook tests', () => {
function useError(throwError?: boolean) {
Expand Down Expand Up @@ -142,4 +142,51 @@ describe('error hook tests', () => {
expect(result.error).toBe(undefined)
})
})

describe('error output suppression', () => {
test('should allow console.error to be mocked', async () => {
const consoleError = console.error
console.error = jest.fn()

try {
const { rerender, unmount } = renderHook(
(stage) => {
useEffect(() => {
console.error(`expected in effect`)
return () => {
console.error(`expected in unmount`)
}
}, [])
console.error(`expected in ${stage}`)
},
{
initialProps: 'render'
}
)

act(() => {
console.error('expected in act')
})

await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 100))
console.error('expected in async act')
})

rerender('rerender')

unmount()

expect(console.error).toBeCalledWith('expected in render')
expect(console.error).toBeCalledWith('expected in effect')
expect(console.error).toBeCalledWith('expected in act')
expect(console.error).toBeCalledWith('expected in async act')
expect(console.error).toBeCalledWith('expected in rerender')
expect(console.error).toBeCalledWith('expected in unmount')
expect(console.error).toBeCalledTimes(6)
} finally {
console.error = consoleError
}
})
})
})
7 changes: 5 additions & 2 deletions src/native/pure.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { act, create, ReactTestRenderer } from 'react-test-renderer'
import { act as baseAct, create, ReactTestRenderer } from 'react-test-renderer'

import { RendererProps, RendererOptions } from '../types/react'
import { RendererProps, RendererOptions, Act } from '../types/react'

import { createRenderHook } from '../core'
import { createActWrapper } from '../helpers/act'
import { createTestHarness } from '../helpers/createTestHarness'

const act = createActWrapper(baseAct)

function createNativeRenderer<TProps, TResult>(
rendererProps: RendererProps<TProps, TResult>,
{ wrapper }: RendererOptions<TProps>
Expand Down
51 changes: 50 additions & 1 deletion src/server/__tests__/errorHook.test.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'

import { renderHook } from '..'
import { renderHook, act } from '..'

describe('error hook tests', () => {
function useError(throwError?: boolean) {
Expand Down Expand Up @@ -163,4 +163,53 @@ describe('error hook tests', () => {
expect(result.error).toBe(undefined)
})
})

describe('error output suppression', () => {
test('should allow console.error to be mocked', async () => {
const consoleError = console.error
console.error = jest.fn()

try {
const { hydrate, rerender, unmount } = renderHook(
(stage) => {
useEffect(() => {
console.error(`expected in effect`)
return () => {
console.error(`expected in unmount`)
}
}, [])
console.error(`expected in ${stage}`)
},
{
initialProps: 'render'
}
)

hydrate()

act(() => {
console.error('expected in act')
})

await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 100))
console.error('expected in async act')
})

rerender('rerender')

unmount()

expect(console.error).toBeCalledWith('expected in render') // twice render/hydrate
expect(console.error).toBeCalledWith('expected in effect')
expect(console.error).toBeCalledWith('expected in act')
expect(console.error).toBeCalledWith('expected in async act')
expect(console.error).toBeCalledWith('expected in rerender')
expect(console.error).toBeCalledWith('expected in unmount')
expect(console.error).toBeCalledTimes(7)
} finally {
console.error = consoleError
}
})
})
})
7 changes: 5 additions & 2 deletions src/server/pure.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import ReactDOMServer from 'react-dom/server'
import ReactDOM from 'react-dom'
import { act } from 'react-dom/test-utils'
import { act as baseAct } from 'react-dom/test-utils'

import { RendererProps, RendererOptions } from '../types/react'
import { RendererProps, RendererOptions, Act } from '../types/react'

import { createRenderHook } from '../core'
import { createActWrapper } from '../helpers/act'
import { createTestHarness } from '../helpers/createTestHarness'

const act = createActWrapper(baseAct)

function createServerRenderer<TProps, TResult>(
rendererProps: RendererProps<TProps, TResult>,
{ wrapper }: RendererOptions<TProps>
Expand Down