diff --git a/src/__tests__/renderHookToSnapshotStream.test.tsx b/src/__tests__/renderHookToSnapshotStream.test.tsx index d09a84aee..9c1c56c8b 100644 --- a/src/__tests__/renderHookToSnapshotStream.test.tsx +++ b/src/__tests__/renderHookToSnapshotStream.test.tsx @@ -6,6 +6,9 @@ import {renderHookToSnapshotStream} from '@testing-library/react-render-stream' import * as React from 'react' import {withDisabledActWarnings} from '../__testHelpers__/withDisabledActWarnings.js' +// @ts-expect-error this is not defined anywhere +globalThis.IS_REACT_ACT_ENVIRONMENT = false + const testEvents = new EventEmitter<{ rerenderWithValue: [unknown] }>() @@ -33,13 +36,13 @@ test('basic functionality', async () => { const {takeSnapshot} = renderHookToSnapshotStream(useRerenderEvents, { initialProps: 'initial', }) - testEvents.emit('rerenderWithValue', 'value') - await Promise.resolve() - testEvents.emit('rerenderWithValue', 'value2') { const snapshot = await takeSnapshot() expect(snapshot).toBe('initial') } + testEvents.emit('rerenderWithValue', 'value') + await Promise.resolve() + testEvents.emit('rerenderWithValue', 'value2') { const snapshot = await takeSnapshot() expect(snapshot).toBe('value') @@ -62,12 +65,12 @@ test.each<[type: string, initialValue: unknown, ...nextValues: unknown[]]>([ const {takeSnapshot} = renderHookToSnapshotStream(useRerenderEvents, { initialProps: initialValue, }) + expect(await takeSnapshot()).toBe(initialValue) for (const nextValue of nextValues) { testEvents.emit('rerenderWithValue', nextValue) // allow for a render to happen await Promise.resolve() } - expect(await takeSnapshot()).toBe(initialValue) for (const nextValue of nextValues) { expect(await takeSnapshot()).toBe(nextValue) } diff --git a/src/__tests__/renderToRenderStream.test.tsx b/src/__tests__/renderToRenderStream.test.tsx index 195ed6ad4..32d270c33 100644 --- a/src/__tests__/renderToRenderStream.test.tsx +++ b/src/__tests__/renderToRenderStream.test.tsx @@ -3,6 +3,10 @@ import {describe, test, expect} from '@jest/globals' import {renderToRenderStream} from '@testing-library/react-render-stream' import {userEvent} from '@testing-library/user-event' import * as React from 'react' + +// @ts-expect-error this is not defined anywhere +globalThis.IS_REACT_ACT_ENVIRONMENT = false + function CounterForm({ value, onIncrement, @@ -39,14 +43,14 @@ describe('snapshotDOM', () => { }, ) const utils = await renderResultPromise - const incrementButton = utils.getByText('Increment') - await userEvent.click(incrementButton) - await userEvent.click(incrementButton) { const {withinDOM} = await takeRender() const input = withinDOM().getByLabelText('Value') expect(input.value).toBe('0') } + const incrementButton = utils.getByText('Increment') + await userEvent.click(incrementButton) + await userEvent.click(incrementButton) { const {withinDOM} = await takeRender() const input = withinDOM().getByLabelText('Value') diff --git a/src/index.ts b/src/index.ts index 9f3c829af..f172c2f3f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,8 @@ import '@testing-library/react-render-stream/expect' +import {cleanup} from '@testing-library/react-render-stream/pure' export * from '@testing-library/react-render-stream/pure' + +const global = globalThis as {afterEach?: (fn: () => void) => void} +if (global.afterEach) { + global.afterEach(cleanup) +} diff --git a/src/pure.ts b/src/pure.ts index 5ec488adc..185e80110 100644 --- a/src/pure.ts +++ b/src/pure.ts @@ -19,4 +19,4 @@ export type {SnapshotStream} from './renderHookToSnapshotStream.js' export type {Assertable} from './assertable.js' -export {renderWithoutAct} from './renderStream/renderWithoutAct.js' +export {renderWithoutAct, cleanup} from './renderStream/renderWithoutAct.js' diff --git a/src/renderStream/__tests__/createRenderStream.test.tsx b/src/renderStream/__tests__/createRenderStream.test.tsx index c7f0908cf..443e0feac 100644 --- a/src/renderStream/__tests__/createRenderStream.test.tsx +++ b/src/renderStream/__tests__/createRenderStream.test.tsx @@ -1,11 +1,22 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import {jest, describe, test, expect} from '@jest/globals' import {createRenderStream} from '@testing-library/react-render-stream' -import {userEvent} from '@testing-library/user-event' +//import {userEvent} from '@testing-library/user-event' import * as React from 'react' import {ErrorBoundary} from 'react-error-boundary' import {getExpectErrorMessage} from '../../__testHelpers__/getCleanedErrorMessage.js' +// @ts-expect-error this is not defined anywhere +globalThis.IS_REACT_ACT_ENVIRONMENT = false + +async function click(element: HTMLElement) { + const opts = {bubbles: true, cancelable: true, buttons: 1} + element.dispatchEvent(new Event('mousedown', opts)) + await new Promise(r => setTimeout(r, 50)) + element.dispatchEvent(new Event('mouseup', opts)) + element.dispatchEvent(new Event('click', opts)) +} + function CounterForm({ value, onIncrement, @@ -39,14 +50,14 @@ describe('snapshotDOM', () => { snapshotDOM: true, }) const utils = render() - const incrementButton = utils.getByText('Increment') - await userEvent.click(incrementButton) - await userEvent.click(incrementButton) { const {withinDOM} = await takeRender() const input = withinDOM().getByLabelText('Value') expect(input.value).toBe('0') } + const incrementButton = utils.getByText('Increment') as HTMLElement // TODO + await click(incrementButton) + await click(incrementButton) { const {withinDOM} = await takeRender() // a one-off to test that `queryBy` works and accepts a type argument @@ -76,7 +87,7 @@ describe('snapshotDOM', () => { const {withinDOM} = await takeRender() const snapshotIncrementButton = withinDOM().getByText('Increment') try { - await userEvent.click(snapshotIncrementButton) + await click(snapshotIncrementButton) } catch (error) { expect(error).toMatchInlineSnapshot(` [Error: Uncaught [Error: @@ -130,13 +141,13 @@ describe('replaceSnapshot', () => { value: number }>() const utils = render() - const incrementButton = utils.getByText('Increment') - await userEvent.click(incrementButton) - await userEvent.click(incrementButton) { const {snapshot} = await takeRender() expect(snapshot).toEqual({value: 0}) } + const incrementButton = utils.getByText('Increment') as HTMLElement // TODO + await click(incrementButton) + await click(incrementButton) { const {snapshot} = await takeRender() expect(snapshot).toEqual({value: 1}) @@ -160,13 +171,14 @@ describe('replaceSnapshot', () => { initialSnapshot: {unrelatedValue: 'unrelated', value: -1}, }) const utils = render() - const incrementButton = utils.getByText('Increment') - await userEvent.click(incrementButton) - await userEvent.click(incrementButton) { const {snapshot} = await takeRender() expect(snapshot).toEqual({unrelatedValue: 'unrelated', value: 0}) } + + const incrementButton = utils.getByText('Increment') as HTMLElement // TODO + await click(incrementButton) + await click(incrementButton) { const {snapshot} = await takeRender() expect(snapshot).toEqual({unrelatedValue: 'unrelated', value: 1}) @@ -203,6 +215,8 @@ describe('replaceSnapshot', () => { , ) + await new Promise(r => setTimeout(r, 10)) + spy.mockRestore() expect(caughtError!).toMatchInlineSnapshot( @@ -231,10 +245,11 @@ describe('onRender', () => { }, }) const utils = render() - const incrementButton = utils.getByText('Increment') - await userEvent.click(incrementButton) - await userEvent.click(incrementButton) await takeRender() + + const incrementButton = utils.getByText('Increment') as HTMLElement // TODO + await click(incrementButton) + await click(incrementButton) await takeRender() await takeRender() }) @@ -254,10 +269,10 @@ describe('onRender', () => { }) const utils = render() - const incrementButton = utils.getByText('Increment') - await userEvent.click(incrementButton) - await userEvent.click(incrementButton) await takeRender() + const incrementButton = utils.getByText('Increment') as HTMLElement // TODO + await click(incrementButton) + await click(incrementButton) const error = await getExpectErrorMessage(takeRender()) expect(error).toMatchInlineSnapshot(` diff --git a/src/renderStream/renderWithoutAct.tsx b/src/renderStream/renderWithoutAct.tsx index 715bb99f6..2033906ab 100644 --- a/src/renderStream/renderWithoutAct.tsx +++ b/src/renderStream/renderWithoutAct.tsx @@ -32,6 +32,8 @@ function renderRoot( root: ReturnType }, ): RenderResult { + // @ts-expect-error this is not defined anywhere + globalThis.IS_REACT_ACT_ENVIRONMENT = false root.render( WrapperComponent ? React.createElement(WrapperComponent, null, ui) : ui, ) @@ -150,3 +152,15 @@ function createConcurrentRoot(container: ReactDOMClient.Container) { }, } } + +export function cleanup() { + mountedRootEntries.forEach(({root, container}) => { + root.unmount() + + if (container.parentNode === document.body) { + document.body.removeChild(container) + } + }) + mountedRootEntries.length = 0 + mountedContainers.clear() +}