first bunch of tests

Author: phryneas

jest.config.cjs

@@ -0,0 +1,6 @@
+const {jest: jestConfig} = require('kcd-scripts/config')
+
+module.exports = Object.assign(jestConfig, {
+  resolver: 'ts-jest-resolver',
+  prettierPath: null,
+})

package.json

@@ -56,6 +56,7 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.16.4",
     "@jest/globals": "^29.7.0",
+    "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.7",
     "@types/jsdom": "^21.1.7",
     "@types/react": "^18",
@@ -67,6 +68,8 @@
     "publint": "^0.2.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
+    "ts-jest-resolver": "^2.0.1",
     "tsup": "^8.3.0",
     "typescript": "^5.6.2"
   },
@@ -82,7 +85,7 @@
     "prepack": "yarn build",
     "format": "kcd-scripts format",
     "lint": "kcd-scripts lint --config .eslintrc.cjs",
-    "test": "kcd-scripts test --passWithNoTests",
+    "test": "kcd-scripts test --config jest.config.cjs",
     "verify": "attw --pack . && publint",
     "typecheck": "kcd-scripts typecheck --build",
     "validate": "CI=true kcd-scripts validate verify,lint,typecheck,test"

src/index.ts

@@ -6,9 +6,9 @@ export type {
 } from './renderStream/createRenderStream.js'
 export {
   createRenderStream,
-  useTrackRenders,
   WaitForRenderTimeoutError,
 } from './renderStream/createRenderStream.js'
+export {useTrackRenders} from './renderStream/useTrackRenders.js'
 
 export type {SyncScreen} from './renderStream/Render.js'
 

src/renderStream/__testHelpers__/useShim.js

@@ -0,0 +1,46 @@
+/* eslint-disable default-case */
+/* eslint-disable consistent-return */
+function isStatefulPromise(promise) {
+  return 'status' in promise
+}
+function wrapPromiseWithState(promise) {
+  if (isStatefulPromise(promise)) {
+    return promise
+  }
+  const pendingPromise = promise
+  pendingPromise.status = 'pending'
+  pendingPromise.then(
+    value => {
+      if (pendingPromise.status === 'pending') {
+        const fulfilledPromise = pendingPromise
+        fulfilledPromise.status = 'fulfilled'
+        fulfilledPromise.value = value
+      }
+    },
+    reason => {
+      if (pendingPromise.status === 'pending') {
+        const rejectedPromise = pendingPromise
+        rejectedPromise.status = 'rejected'
+        rejectedPromise.reason = reason
+      }
+    },
+  )
+  return promise
+}
+
+/**
+ * @template T
+ * @param {Promise<T>} promise
+ * @returns {T}
+ */
+export function __use(promise) {
+  const statefulPromise = wrapPromiseWithState(promise)
+  switch (statefulPromise.status) {
+    case 'pending':
+      throw statefulPromise
+    case 'rejected':
+      throw statefulPromise.reason
+    case 'fulfilled':
+      return statefulPromise.value
+  }
+}

src/renderStream/__tests__/createRenderStream.test.tsx

@@ -0,0 +1,185 @@
+/* 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 * as React from 'react'
+import {ErrorBoundary} from 'react-error-boundary'
+
+function CounterForm({
+  value,
+  onIncrement,
+}: {
+  value: number
+  onIncrement: () => void
+}) {
+  return (
+    <form>
+      <button type="button" onClick={() => onIncrement()}>
+        Increment
+      </button>
+      <label>
+        Value
+        <input type="number" value={value} readOnly />
+      </label>
+    </form>
+  )
+}
+
+describe('snapshotDOM', () => {
+  test('basic functionality', async () => {
+    function Counter() {
+      const [value, setValue] = React.useState(0)
+      return (
+        <CounterForm value={value} onIncrement={() => setValue(v => v + 1)} />
+      )
+    }
+
+    const {takeRender, render} = createRenderStream({
+      snapshotDOM: true,
+    })
+    const utils = render(<Counter />)
+    const incrementButton = utils.getByText('Increment')
+    await userEvent.click(incrementButton)
+    await userEvent.click(incrementButton)
+    {
+      const {withinDOM} = await takeRender()
+      const input = withinDOM().getByLabelText<HTMLInputElement>('Value')
+      expect(input.value).toBe('0')
+    }
+    {
+      const {withinDOM} = await takeRender()
+      const input = withinDOM().getByLabelText<HTMLInputElement>('Value')
+      expect(input.value).toBe('1')
+    }
+    {
+      const {withinDOM} = await takeRender()
+      const input = withinDOM().getByLabelText<HTMLInputElement>('Value')
+      expect(input.value).toBe('2')
+    }
+  })
+
+  test('errors when triggering events on rendered elemenst', async () => {
+    function Counter() {
+      const [value, setValue] = React.useState(0)
+      return (
+        <CounterForm value={value} onIncrement={() => setValue(v => v + 1)} />
+      )
+    }
+
+    const {takeRender, render} = createRenderStream({
+      snapshotDOM: true,
+    })
+    render(<Counter />)
+    {
+      const {withinDOM} = await takeRender()
+      const snapshotIncrementButton = withinDOM().getByText('Increment')
+      try {
+        await userEvent.click(snapshotIncrementButton)
+      } catch (error) {
+        expect(error).toMatchInlineSnapshot(`
+[Error: Uncaught [Error: 
+    DOM interaction with a snapshot detected in test.
+    Please don't interact with the DOM you get from \`withinDOM\`,
+    but still use \`screen\` to get elements for simulating user interaction.
+    ]]
+`)
+      }
+    }
+  })
+})
+
+describe('replaceSnapshot', () => {
+  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
+    }>()
+    const utils = render(<Counter />)
+    const incrementButton = utils.getByText('Increment')
+    await userEvent.click(incrementButton)
+    await userEvent.click(incrementButton)
+    {
+      const {snapshot} = await takeRender()
+      expect(snapshot).toEqual({value: 0})
+    }
+    {
+      const {snapshot} = await takeRender()
+      expect(snapshot).toEqual({value: 1})
+    }
+    {
+      const {snapshot} = await takeRender()
+      expect(snapshot).toEqual({value: 2})
+    }
+  })
+  describe('callback notation', () => {
+    test('basic functionality', async () => {
+      function Counter() {
+        const [value, setValue] = React.useState(0)
+        replaceSnapshot(oldSnapshot => ({...oldSnapshot, value}))
+        return (
+          <CounterForm value={value} onIncrement={() => setValue(v => v + 1)} />
+        )
+      }
+
+      const {takeRender, replaceSnapshot, render} = createRenderStream({
+        initialSnapshot: {unrelatedValue: 'unrelated', value: -1},
+      })
+      const utils = render(<Counter />)
+      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 {snapshot} = await takeRender()
+        expect(snapshot).toEqual({unrelatedValue: 'unrelated', value: 1})
+      }
+      {
+        const {snapshot} = await takeRender()
+        expect(snapshot).toEqual({unrelatedValue: 'unrelated', value: 2})
+      }
+    })
+    test('requires initialSnapshot', async () => {
+      function Counter() {
+        const [value, setValue] = React.useState(0)
+        replaceSnapshot(() => ({value}))
+        return (
+          <CounterForm value={value} onIncrement={() => setValue(v => v + 1)} />
+        )
+      }
+
+      const {replaceSnapshot, render} = createRenderStream<{
+        value: number
+      }>()
+      let caughtError: Error
+
+      const spy = jest.spyOn(console, 'error')
+      spy.mockImplementation(() => {})
+      render(
+        <ErrorBoundary
+          fallbackRender={({error}) => {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            caughtError = error
+            return null
+          }}
+        >
+          <Counter />
+        </ErrorBoundary>,
+      )
+      spy.mockRestore()
+
+      expect(caughtError!).toMatchInlineSnapshot(
+        `[Error: Cannot use a function to update the snapshot if no initial snapshot was provided.]`,
+      )
+    })
+  })
+})