add test for onRender

Author: phryneas

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 (
+        <CounterForm value={value} onIncrement={() => 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(<Counter />)
+    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 (
+        <CounterForm value={value} onIncrement={() => setValue(v => v + 1)} />
+      )
+    }
+
+    const {takeRender, render} = createRenderStream({
+      onRender(info) {
+        expect(info.count).toBe(1)
+      },
+    })
+
+    const utils = render(<Counter />)
+    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
+`)
+  })
+})

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',