test: wrap react state changes in act for vitest tests (#51)

ae9is · Apr 28, 2024 · 5bca0ea · 5bca0ea
1 parent 236cf91
commit 5bca0ea
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/fontpicker/src/components/App.test.tsx b/packages/fontpicker/src/components/App.test.tsx
@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 import { describe, it, expect } from 'vitest'
-import { screen, render, within, userEvent } from '../test/utils'
+import { act, screen, render, within, userEvent } from '../test/utils'
 import App from './App'
 
 function checkFontLoaded(cssId: string) {
@@ -11,7 +11,9 @@ function checkFontLoaded(cssId: string) {
 }
 
 beforeEach(() => {
-  render(<App />)
+  act(() => {
+    render(<App />)
+  })
 })
 
 describe('<App />', () => {
@@ -21,13 +23,17 @@ describe('<App />', () => {
 
   it('manually loads fonts', async () => {
     await screen.findByTestId('manualload-fontpicker')
-    await userEvent.click(screen.getByTestId('manualload-beastly'))
+    await act(async () => {
+      await userEvent.click(screen.getByTestId('manualload-beastly'))
+    })
     checkFontLoaded('google-font-rubik_beastly-all')
   })
 
   it('loads fonts while hidden', async () => {
     expect(screen.queryByTestId('loaderonly-fontpicker')).to.be.null
-    await userEvent.click(screen.getByTestId('loaderonly-rancho'))
+    await act(async () => {
+      await userEvent.click(screen.getByTestId('loaderonly-rancho'))
+    })
     checkFontLoaded('google-font-rancho-all')
   })
 

diff --git a/packages/fontpicker/src/test/utils.tsx b/packages/fontpicker/src/test/utils.tsx
@@ -15,7 +15,8 @@ const customRender = (ui: React.ReactElement, options = {}) =>
     ...options,
   })
 
-export * from '@testing-library/react'
+export { act } from 'react'
+export { screen, within } from '@testing-library/react'
 export { default as userEvent } from '@testing-library/user-event'
 // override render export
 export { customRender as render }