test: test <Application> unmounts

test/e2e/components/Application.test.tsx

@@ -3,31 +3,83 @@ import {
     expect,
     it,
     vi,
-} from 'vitest';
+} from 'vitest'
+import { type Application as PixiApplication } from 'pixi.js'
 import { render } from '@testing-library/react'
+import { useEffect } from 'react'
 
 import { Application } from '../../../src/components/Application'
-import { wait } from '../../utils/wait';
+import { useApplication } from '../../../src/hooks/useApplication'
 
-describe('Application', () =>
-{
-    describe('onInit', () => {
-        it('runs the callback', async () => {
-            const onInitSpy = vi.fn()
+describe('Application', () => {
+    it('runs the `onInit` callback', async () => {
+        const onInitSpy = vi.fn()
 
-            const TestComponent = function() {
-                return (
-                    <Application onInit={onInitSpy} />
-                )
-            }
+        const TestComponent = () => (
+            <Application onInit={onInitSpy} />
+        )
 
-            render((
-                <TestComponent />
-            ))
+        render(<TestComponent />)
 
-            await wait(1000)
+        await expect.poll(() => onInitSpy.mock.calls.length).toEqual(1)
+    });
 
-            expect(onInitSpy.mock.calls.length).to.equal(1)
-        });
+    it('unmounts after init', async () => {
+        let testApp: PixiApplication | null = null
+
+        const TestChildComponent = () => {
+            const { app } = useApplication()
+
+            useEffect(() => {
+                testApp = app
+
+                return () => {
+                    testApp = app
+                }
+            }, [app])
+
+            return null
+        }
+
+        const TestComponent = () => (
+            <Application>
+                <TestChildComponent />
+            </Application>
+        )
+
+        const { unmount } = render(<TestComponent />)
+
+        await expect.poll(() => Boolean(testApp?.renderer)).toBeTruthy()
+
+        unmount()
+
+        await expect.poll(() => !testApp?.renderer).toBeFalsy()
+        await expect.poll(() => !testApp?.stage).toBeFalsy()
     })
-});
+
+    it('unmounts during init', async () => {
+        let testApp: PixiApplication | null = null
+
+        const TestChildComponent = () => {
+            testApp = useApplication().app
+
+            return null
+        }
+
+        const TestComponent = () => (
+            <Application>
+                <TestChildComponent />
+            </Application>
+        )
+
+        const { unmount } = render(<TestComponent />)
+
+        await expect.poll(() => !testApp?.renderer).toBeFalsy()
+        await expect.poll(() => !testApp?.stage).toBeFalsy()
+
+        unmount()
+
+        await expect.poll(() => !testApp?.renderer).toBeFalsy()
+        await expect.poll(() => !testApp?.stage).toBeFalsy()
+    });
+})

vitest.setup.ts

@@ -1,8 +1,10 @@
 import { afterEach } from 'vitest';
 import '@testing-library/jest-dom/vitest';
-import { cleanup } from '@testing-library/react';
+import {
+    cleanup,
+    configure,
+} from '@testing-library/react';
 
-afterEach(() =>
-{
-    cleanup();
-});
+configure({ reactStrictMode: true });
+
+afterEach(() => cleanup());

vitest.workspace.ts

@@ -20,9 +20,7 @@ export default defineWorkspace([
             },
             globals: true,
             include: ['test/e2e/**/*.test.ts(x)'],
-            setupFiles: [
-                './vitest.setup.ts'
-            ],
+            setupFiles: ['./vitest.setup.ts'],
         },
     },
 ]);