Skip to content

Commit e8616b3

Browse files
phryneasphryneas
committed
painful progress
1 parent ddf9df9 commit e8616b3

File tree

6 files changed

+67
-25
lines changed

6 files changed

+67
-25
lines changed

‎src/__tests__/renderHookToSnapshotStream.test.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import {renderHookToSnapshotStream} from '@testing-library/react-render-stream'
66
import * as React from 'react'
77
import {withDisabledActWarnings} from '../__testHelpers__/withDisabledActWarnings.js'
88

9+
// @ts-expect-error this is not defined anywhere
10+
globalThis.IS_REACT_ACT_ENVIRONMENT = false
11+
912
const testEvents = new EventEmitter<{
1013
rerenderWithValue: [unknown]
1114
}>()
@@ -33,13 +36,13 @@ test('basic functionality', async () => {
3336
const {takeSnapshot} = renderHookToSnapshotStream(useRerenderEvents, {
3437
initialProps: 'initial',
3538
})
36-
testEvents.emit('rerenderWithValue', 'value')
37-
await Promise.resolve()
38-
testEvents.emit('rerenderWithValue', 'value2')
3939
{
4040
const snapshot = await takeSnapshot()
4141
expect(snapshot).toBe('initial')
4242
}
43+
testEvents.emit('rerenderWithValue', 'value')
44+
await Promise.resolve()
45+
testEvents.emit('rerenderWithValue', 'value2')
4346
{
4447
const snapshot = await takeSnapshot()
4548
expect(snapshot).toBe('value')
@@ -62,12 +65,12 @@ test.each<[type: string, initialValue: unknown, ...nextValues: unknown[]]>([
6265
const {takeSnapshot} = renderHookToSnapshotStream(useRerenderEvents, {
6366
initialProps: initialValue,
6467
})
68+
expect(await takeSnapshot()).toBe(initialValue)
6569
for (const nextValue of nextValues) {
6670
testEvents.emit('rerenderWithValue', nextValue)
6771
// allow for a render to happen
6872
await Promise.resolve()
6973
}
70-
expect(await takeSnapshot()).toBe(initialValue)
7174
for (const nextValue of nextValues) {
7275
expect(await takeSnapshot()).toBe(nextValue)
7376
}

‎src/__tests__/renderToRenderStream.test.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import {describe, test, expect} from '@jest/globals'
33
import {renderToRenderStream} from '@testing-library/react-render-stream'
44
import {userEvent} from '@testing-library/user-event'
55
import * as React from 'react'
6+
7+
// @ts-expect-error this is not defined anywhere
8+
globalThis.IS_REACT_ACT_ENVIRONMENT = false
9+
610
function CounterForm({
711
value,
812
onIncrement,
@@ -39,14 +43,14 @@ describe('snapshotDOM', () => {
3943
},
4044
)
4145
const utils = await renderResultPromise
42-
const incrementButton = utils.getByText('Increment')
43-
await userEvent.click(incrementButton)
44-
await userEvent.click(incrementButton)
4546
{
4647
const {withinDOM} = await takeRender()
4748
const input = withinDOM().getByLabelText<HTMLInputElement>('Value')
4849
expect(input.value).toBe('0')
4950
}
51+
const incrementButton = utils.getByText('Increment')
52+
await userEvent.click(incrementButton)
53+
await userEvent.click(incrementButton)
5054
{
5155
const {withinDOM} = await takeRender()
5256
const input = withinDOM().getByLabelText<HTMLInputElement>('Value')

‎src/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
import '@testing-library/react-render-stream/expect'
2+
import {cleanup} from '@testing-library/react-render-stream/pure'
23
export * from '@testing-library/react-render-stream/pure'
4+
5+
const global = globalThis as {afterEach?: (fn: () => void) => void}
6+
if (global.afterEach) {
7+
global.afterEach(cleanup)
8+
}

‎src/pure.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@ export type {SnapshotStream} from './renderHookToSnapshotStream.js'
1919

2020
export type {Assertable} from './assertable.js'
2121

22-
export {renderWithoutAct} from './renderStream/renderWithoutAct.js'
22+
export {renderWithoutAct, cleanup} from './renderStream/renderWithoutAct.js'

‎src/renderStream/__tests__/createRenderStream.test.tsx‎

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
/* eslint-disable @typescript-eslint/no-use-before-define */
22
import {jest, describe, test, expect} from '@jest/globals'
33
import {createRenderStream} from '@testing-library/react-render-stream'
4-
import {userEvent} from '@testing-library/user-event'
4+
//import {userEvent} from '@testing-library/user-event'
55
import * as React from 'react'
66
import {ErrorBoundary} from 'react-error-boundary'
77
import {getExpectErrorMessage} from '../../__testHelpers__/getCleanedErrorMessage.js'
88

9+
// @ts-expect-error this is not defined anywhere
10+
globalThis.IS_REACT_ACT_ENVIRONMENT = false
11+
12+
async function click(element: HTMLElement) {
13+
const opts = {bubbles: true, cancelable: true, buttons: 1}
14+
element.dispatchEvent(new Event('mousedown', opts))
15+
await new Promise(r => setTimeout(r, 50))
16+
element.dispatchEvent(new Event('mouseup', opts))
17+
element.dispatchEvent(new Event('click', opts))
18+
}
19+
920
function CounterForm({
1021
value,
1122
onIncrement,
@@ -39,14 +50,14 @@ describe('snapshotDOM', () => {
3950
snapshotDOM: true,
4051
})
4152
const utils = render(<Counter />)
42-
const incrementButton = utils.getByText('Increment')
43-
await userEvent.click(incrementButton)
44-
await userEvent.click(incrementButton)
4553
{
4654
const {withinDOM} = await takeRender()
4755
const input = withinDOM().getByLabelText<HTMLInputElement>('Value')
4856
expect(input.value).toBe('0')
4957
}
58+
const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
59+
await click(incrementButton)
60+
await click(incrementButton)
5061
{
5162
const {withinDOM} = await takeRender()
5263
// a one-off to test that `queryBy` works and accepts a type argument
@@ -76,7 +87,7 @@ describe('snapshotDOM', () => {
7687
const {withinDOM} = await takeRender()
7788
const snapshotIncrementButton = withinDOM().getByText('Increment')
7889
try {
79-
await userEvent.click(snapshotIncrementButton)
90+
await click(snapshotIncrementButton)
8091
} catch (error) {
8192
expect(error).toMatchInlineSnapshot(`
8293
[Error: Uncaught [Error:
@@ -130,13 +141,13 @@ describe('replaceSnapshot', () => {
130141
value: number
131142
}>()
132143
const utils = render(<Counter />)
133-
const incrementButton = utils.getByText('Increment')
134-
await userEvent.click(incrementButton)
135-
await userEvent.click(incrementButton)
136144
{
137145
const {snapshot} = await takeRender()
138146
expect(snapshot).toEqual({value: 0})
139147
}
148+
const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
149+
await click(incrementButton)
150+
await click(incrementButton)
140151
{
141152
const {snapshot} = await takeRender()
142153
expect(snapshot).toEqual({value: 1})
@@ -160,13 +171,14 @@ describe('replaceSnapshot', () => {
160171
initialSnapshot: {unrelatedValue: 'unrelated', value: -1},
161172
})
162173
const utils = render(<Counter />)
163-
const incrementButton = utils.getByText('Increment')
164-
await userEvent.click(incrementButton)
165-
await userEvent.click(incrementButton)
166174
{
167175
const {snapshot} = await takeRender()
168176
expect(snapshot).toEqual({unrelatedValue: 'unrelated', value: 0})
169177
}
178+
179+
const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
180+
await click(incrementButton)
181+
await click(incrementButton)
170182
{
171183
const {snapshot} = await takeRender()
172184
expect(snapshot).toEqual({unrelatedValue: 'unrelated', value: 1})
@@ -203,6 +215,8 @@ describe('replaceSnapshot', () => {
203215
<Counter />
204216
</ErrorBoundary>,
205217
)
218+
await new Promise(r => setTimeout(r, 10))
219+
206220
spy.mockRestore()
207221

208222
expect(caughtError!).toMatchInlineSnapshot(
@@ -231,10 +245,11 @@ describe('onRender', () => {
231245
},
232246
})
233247
const utils = render(<Counter />)
234-
const incrementButton = utils.getByText('Increment')
235-
await userEvent.click(incrementButton)
236-
await userEvent.click(incrementButton)
237248
await takeRender()
249+
250+
const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
251+
await click(incrementButton)
252+
await click(incrementButton)
238253
await takeRender()
239254
await takeRender()
240255
})
@@ -254,10 +269,10 @@ describe('onRender', () => {
254269
})
255270

256271
const utils = render(<Counter />)
257-
const incrementButton = utils.getByText('Increment')
258-
await userEvent.click(incrementButton)
259-
await userEvent.click(incrementButton)
260272
await takeRender()
273+
const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
274+
await click(incrementButton)
275+
await click(incrementButton)
261276
const error = await getExpectErrorMessage(takeRender())
262277

263278
expect(error).toMatchInlineSnapshot(`

‎src/renderStream/renderWithoutAct.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ function renderRoot(
3232
root: ReturnType<typeof createConcurrentRoot>
3333
},
3434
): RenderResult<Queries, any, any> {
35+
// @ts-expect-error this is not defined anywhere
36+
globalThis.IS_REACT_ACT_ENVIRONMENT = false
3537
root.render(
3638
WrapperComponent ? React.createElement(WrapperComponent, null, ui) : ui,
3739
)
@@ -150,3 +152,15 @@ function createConcurrentRoot(container: ReactDOMClient.Container) {
150152
},
151153
}
152154
}
155+
156+
export function cleanup() {
157+
mountedRootEntries.forEach(({root, container}) => {
158+
root.unmount()
159+
160+
if (container.parentNode === document.body) {
161+
document.body.removeChild(container)
162+
}
163+
})
164+
mountedRootEntries.length = 0
165+
mountedContainers.clear()
166+
}

0 commit comments

Comments
 (0)