chore: improve the test by executeComponentTest

Author: PatrickDinh

src/tests/test-component.tsx

@@ -0,0 +1,8 @@
+import userEvent, { UserEvent } from '@testing-library/user-event'
+
+export async function executeComponentTest<T>(renderComponent: () => T, assertion: (component: T, user: UserEvent) => Promise<unknown>) {
+  const component = renderComponent()
+  const user = userEvent.setup()
+
+  await assertion(component, user)
+}

tests/setup/clean-up-dom.ts

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

tests/theme.test.tsx

@@ -1,26 +1,32 @@
 import { describe, it, expect, beforeAll } from 'vitest'
-import { render, waitFor, screen } from '../src/tests/testing-library'
+import { render, waitFor } from '../src/tests/testing-library'
 import MatchMediaMock from '@/tests/mock-match-media'
 import { afterEach } from 'node:test'
 import { ThemeToggle } from '@/features/theme/components/theme-toggle'
-import userEvent from '@testing-library/user-event'
+import { executeComponentTest } from '@/tests/test-component'
 
 describe('when using the default system light theme', () => {
-  beforeAll(() => {
-    render(<ThemeToggle />)
-  })
-
-  it('the theme is set to light', async () => {
-    await waitFor(() => expect(document.documentElement.classList.contains('light')).toBe(true))
+  it('the theme is set to light', () => {
+    return executeComponentTest(
+      () => render(<ThemeToggle />),
+      async () => {
+        await waitFor(() => expect(document.documentElement.classList.contains('light')).toBe(true))
+      }
+    )
   })
+})
 
-  describe('when the theme is toggled to dark', () => {
-    it('the theme is set to dark', async () => {
-      userEvent.click(await screen.findByTestId('theme-toggle-menu'))
-      userEvent.click(await screen.findByText('Dark'))
+describe('when the theme is toggled to dark', () => {
+  it('the theme is set to dark', async () => {
+    return executeComponentTest(
+      () => render(<ThemeToggle />),
+      async (component, user) => {
+        user.click(await component.findByTestId('theme-toggle-menu'))
+        user.click(await component.findByText('Dark'))
 
-      await waitFor(() => expect(document.documentElement.classList.contains('dark')).toBe(true))
-    })
+        await waitFor(() => expect(document.documentElement.classList.contains('dark')).toBe(true))
+      }
+    )
   })
 })
 
@@ -30,11 +36,15 @@ describe('when using the default system dark theme', () => {
   beforeAll(() => {
     // Set system theme to dark
     matchMediaMock.useMediaQuery('(prefers-color-scheme: dark)')
-    render(<ThemeToggle />)
   })
   afterEach(() => matchMediaMock.clear())
 
-  it('the theme is set to dark', async () => {
-    await waitFor(() => expect(document.documentElement.classList.contains('dark')).toBe(true))
+  it('the theme is set to dark', () => {
+    return executeComponentTest(
+      () => render(<ThemeToggle />),
+      async () => {
+        await waitFor(() => expect(document.documentElement.classList.contains('dark')).toBe(true))
+      }
+    )
   })
 })

vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
   test: {
     root: 'tests',
     environment: 'happy-dom',
+    setupFiles: ['setup/clean-up-dom.ts'],
   },
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`