CI matrix

Author: phryneas

.github/workflows/ci.yml

@@ -10,8 +10,12 @@ on:
 
 jobs:
   ci:
-    name: CI
+    name: CI (React ${{ matrix.react }})
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        react: ['16.x', '17.x', '18.x', '19.0', '19.x']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -25,6 +29,15 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
+      - name: Install React ${{ matrix.react }}
+        run:
+          yarn add --dev react@${{ matrix.react }} react-dom@${{ matrix.react }}
+        env:
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
+
+      - name: Build package
+        run: yarn build
+
       - name: Run tests, lint and verify package integrity
         run: yarn run validate
 

jest.config.cjs

@@ -3,4 +3,11 @@ const {jest: jestConfig} = require('kcd-scripts/config')
 module.exports = Object.assign(jestConfig, {
   resolver: 'ts-jest-resolver',
   prettierPath: null,
+  // React 16/17 use the legacy renderer and never call the client APIs.
+  ...(/^(16|17)\./.test(require('react').version) && {
+    moduleNameMapper: {
+      ...jestConfig.moduleNameMapper,
+      '^react-dom/client$': require.resolve('react-dom'),
+    },
+  }),
 })

src/__tests__/renderHookToSnapshotStream.test.tsx

@@ -9,6 +9,9 @@ import {
 } from '@testing-library/react-render-stream'
 import * as React from 'react'
 
+const testWithExternalStore =
+  typeof React.useSyncExternalStore === 'function' ? test : test.skip
+
 const testEvents = new EventEmitter<{
   rerenderWithValue: [unknown]
 }>()
@@ -32,7 +35,7 @@ function useRerenderEvents(initialValue: unknown) {
   )
 }
 
-test('basic functionality', async () => {
+testWithExternalStore('basic functionality', async () => {
   const {takeSnapshot} = await renderHookToSnapshotStream(useRerenderEvents, {
     initialProps: 'initial',
   })
@@ -53,7 +56,9 @@ test('basic functionality', async () => {
   }
 })
 
-test.each<[type: string, initialValue: unknown, ...nextValues: unknown[]]>([
+testWithExternalStore.each<
+  [type: string, initialValue: unknown, ...nextValues: unknown[]]
+>([
   ['string', 'initial', 'value', 'value2'],
   ['number', 0, 1, 2],
   ['functions', () => {}, () => {}, function named() {}],