diff --git a/src/renderStream/__tests__/createRenderStream.test.tsx b/src/renderStream/__tests__/createRenderStream.test.tsx index a6bd5eca8..a59db86f0 100644 --- a/src/renderStream/__tests__/createRenderStream.test.tsx +++ b/src/renderStream/__tests__/createRenderStream.test.tsx @@ -183,3 +183,65 @@ describe('replaceSnapshot', () => { }) }) }) + +describe('onRender', () => { + test('basic functionality', async () => { + function Counter() { + const [value, setValue] = React.useState(0) + replaceSnapshot({value}) + return ( + setValue(v => v + 1)} /> + ) + } + + const {takeRender, replaceSnapshot, render} = createRenderStream<{ + value: number + }>({ + onRender(info) { + // can use expect here + expect(info.count).toBe(info.snapshot.value + 1) + }, + }) + const utils = render() + const incrementButton = utils.getByText('Increment') + await userEvent.click(incrementButton) + await userEvent.click(incrementButton) + await takeRender() + await takeRender() + await takeRender() + }) + + test('errors in `onRender` propagate to the associated `takeRender` call', async () => { + function Counter() { + const [value, setValue] = React.useState(0) + return ( + setValue(v => v + 1)} /> + ) + } + + const {takeRender, render} = createRenderStream({ + onRender(info) { + expect(info.count).toBe(1) + }, + }) + + const utils = render() + const incrementButton = utils.getByText('Increment') + await userEvent.click(incrementButton) + await userEvent.click(incrementButton) + await takeRender() + const error = await takeRender() + .then(() => undefined as never) + .catch(e => e as Error) + + // eslint-disable-next-line no-control-regex + const consoleColors = /\x1b\[\d+m/g + + expect(error.message.replace(consoleColors, '')).toMatchInlineSnapshot(` +expect(received).toBe(expected) // Object.is equality + +Expected: 1 +Received: 2 +`) + }) +}) diff --git a/src/renderStream/__tests__/useTrackRenders.test.tsx b/src/renderStream/__tests__/useTrackRenders.test.tsx index 66841a9ee..ee1ebfcf1 100644 --- a/src/renderStream/__tests__/useTrackRenders.test.tsx +++ b/src/renderStream/__tests__/useTrackRenders.test.tsx @@ -170,7 +170,7 @@ test('specifying the `name` option', async () => { const {renderedComponents} = await takeRender() expect(renderedComponents).toEqual([ 'NamedComponent:Darth Vader', - // TODO: investigate why the order of sibling components is inverted and if it's technically possible to change that + // this relies on the order of `useLayoutEffect` being executed, we have no way to influence that siblings seem "backwards" here 'NamedComponent:Leia', 'NamedComponent:Luke', 'NamedComponent:R2D2',