refactor(tests): fix flakyness (#292)

Author: stipsan

package.json

@@ -68,7 +68,7 @@
     "format": "prettier --cache --write .",
     "lint": "eslint --cache .",
     "prepublishOnly": "pnpm build",
-    "test": "vitest run --typecheck --retry=30",
+    "test": "vitest run --typecheck",
     "watch": "pnpm build -- --watch"
   },
   "browserslist": "extends @sanity/browserslist-config",

src/__tests__/errors.test.tsx

@@ -1,5 +1,4 @@
 import {render} from '@testing-library/react'
-import React from 'react'
 import {mergeMap, of, Subject, throwError} from 'rxjs'
 import {expect, test} from 'vitest'
 

src/__tests__/strictmode.test.ts renamed to src/__tests__/strictmode.test.tsx

@@ -1,14 +1,12 @@
 import {act, render} from '@testing-library/react'
-import {createElement, Fragment, StrictMode, useEffect, useMemo} from 'react'
+import {useEffect, useMemo} from 'react'
 import {BehaviorSubject, Observable} from 'rxjs'
 import {expect, test} from 'vitest'
 
 import {useObservable} from '../useObservable'
 
 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
-// NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
-
 test('Strict mode should trigger double mount effects and re-renders', async () => {
   const subject = new BehaviorSubject(0)
   const observable = subject.asObservable()
@@ -21,10 +19,10 @@ test('Strict mode should trigger double mount effects and re-renders', async ()
     }, [])
     const observedValue = useObservable(observable)
     returnedValues.push(observedValue)
-    return createElement(Fragment, null, observedValue)
+    return <>{observedValue}</>
   }
 
-  render(createElement(StrictMode, null, createElement(ObservableComponent)))
+  render(<ObservableComponent />, {reactStrictMode: true})
   expect(mountCount).toEqual(2)
 
   expect(returnedValues).toEqual([0, 0])
@@ -53,12 +51,12 @@ test('Strict mode should unsubscribe the source observable on unmount', async ()
 
   function ObservableComponent() {
     useObservable(observable)
-    return createElement(Fragment, null)
+    return null
   }
 
-  const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
+  const {unmount} = render(<ObservableComponent />, {reactStrictMode: true})
   expect(subscribed).toEqual([0])
-  rerender(createElement(StrictMode, null, createElement('div')))
+  unmount()
   await Promise.resolve()
   expect(unsubscribed).toEqual([0])
 })
@@ -76,12 +74,12 @@ test('Strict mode should unsubscribe the source observable on unmount if its cre
   function ObservableComponent() {
     const memoObservable = useMemo(() => getObservable(), [])
     useObservable(memoObservable)
-    return createElement(Fragment, null)
+    return null
   }
 
-  const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
+  const {unmount} = render(<ObservableComponent />, {reactStrictMode: true})
   expect(subscriberCount, 'Subscriber count should be 1').toBe(1)
-  rerender(createElement(StrictMode, null, createElement('div')))
+  unmount()
   await Promise.resolve()
   expect(subscriberCount, 'Subscriber count should be 0').toBe(0)
 })

src/__tests__/useObservable.test.ts renamed to src/__tests__/useObservable.test.tsx

@@ -1,5 +1,6 @@
 import {act, render, renderHook} from '@testing-library/react'
-import {createElement, Fragment, useMemo} from 'react'
+import {useMemo} from 'react'
+import {renderToString} from 'react-dom/server'
 import {asyncScheduler, Observable, of, ReplaySubject, scheduled, share, Subject, timer} from 'rxjs'
 import {map} from 'rxjs/operators'
 import {expect, test} from 'vitest'
@@ -51,9 +52,9 @@ test('should not return undefined during render if initial value is given', () =
   function ObservableComponent() {
     const observedValue = useObservable(observable, 'initial value')
     returnedValues.push(observedValue)
-    return createElement(Fragment, null, observedValue)
+    return <>{observedValue}</>
   }
-  render(createElement(ObservableComponent))
+  render(<ObservableComponent />)
   expect(returnedValues).toEqual(expect.arrayContaining(['initial value']))
 })
 
@@ -64,9 +65,9 @@ test('should not return undefined during render if observable is sync', () => {
   function ObservableComponent() {
     const observedValue = useObservable(observable)
     returnedValues.push(observedValue)
-    return createElement(Fragment, null, observedValue)
+    return <>{observedValue}</>
   }
-  render(createElement(ObservableComponent))
+  render(<ObservableComponent />)
   expect(returnedValues).toEqual(expect.arrayContaining(['initial value']))
 })
 
@@ -77,9 +78,9 @@ test('should return undefined during first render if observable is async', () =>
   function ObservableComponent() {
     const observedValue = useObservable(observable)
     returnedValues.push(observedValue)
-    return createElement(Fragment, null, observedValue)
+    return <>{observedValue}</>
   }
-  render(createElement(ObservableComponent))
+  render(<ObservableComponent />)
   expect(returnedValues).toEqual(expect.arrayContaining([undefined]))
 })
 
@@ -261,16 +262,16 @@ test('should return undefined if observable emits undefined, also when given ini
       [props.prefix],
     )
     snapshots.push(useObservable(observable, 'initial'))
-    return createElement(Fragment, null)
+    return null
   }
 
-  const {unmount, rerender} = render(createElement(ObservableComponent, {prefix: 'first'}))
+  const {unmount, rerender} = render(<ObservableComponent prefix="first" />)
   act(() => subject.next('foo'))
   act(() => subject.next(undefined))
   act(() => subject.next('bar'))
 
   // now change the prefix
-  rerender(createElement(ObservableComponent, {prefix: 'second'}))
+  rerender(<ObservableComponent prefix="second" />)
   act(() => subject.next('foo again'))
   act(() => subject.next(undefined))
   act(() => subject.next('bar again'))
@@ -286,3 +287,25 @@ test('should return undefined if observable emits undefined, also when given ini
   ])
   unmount()
 })
+
+test('should support SSR if an initial value is given', () => {
+  const observable = scheduled('async value', asyncScheduler)
+  function ObservableComponent() {
+    const observedValue = useObservable(observable, 'initial value')
+    return <>{observedValue}</>
+  }
+
+  expect(renderToString(<ObservableComponent />)).toBe('initial value')
+})
+
+test('should throw during SSR if no initial value is defined', () => {
+  const observable = scheduled('async value', asyncScheduler)
+  function ObservableComponent() {
+    const observedValue = useObservable(observable)
+    return <>{observedValue}</>
+  }
+
+  expect(() => renderToString(<ObservableComponent />)).toThrowErrorMatchingInlineSnapshot(
+    `[Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.]`,
+  )
+})

vitest-cleanup-after-each.ts

@@ -0,0 +1,6 @@
+import {cleanup} from '@testing-library/react'
+import {afterEach} from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})

vitest.config.ts

@@ -2,6 +2,7 @@ import {defineConfig} from 'vitest/config'
 
 export default defineConfig({
   test: {
+    setupFiles: ['vitest-cleanup-after-each.ts'],
     typecheck: {
       ignoreSourceErrors: true,
     },

vitest.workspace.ts

@@ -4,14 +4,14 @@ import {defineWorkspace} from 'vitest/config'
 // defineWorkspace provides a nice type hinting DX
 export default defineWorkspace([
   {
-    extends: './vitest.config.js',
+    extends: './vitest.config',
     plugins: [react()],
     test: {
       name: 'default',
     },
   },
   {
-    extends: './vitest.config.js',
+    extends: './vitest.config',
     plugins: [
       react({
         babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},