🛠️ [Vitest] Install and configure

config/definitions/audio.d.ts

@@ -0,0 +1,10 @@
+// I more than likely don't actually need this `definitions` file.
+declare module '*.mp3' {
+  const audio: string;
+  export default audio;
+}
+
+declare module '*.webm' {
+  const audio: string;
+  export default audio;
+}

config/tests-setup.ts

@@ -0,0 +1,14 @@
+import {afterEach, beforeEach} from 'vitest';
+import {cleanup} from '@testing-library/react';
+
+import '@testing-library/jest-dom/vitest';
+
+beforeEach(() => {
+  // vi.useFakeTimers();
+});
+
+afterEach(() => {
+  // vi.clearAllTimers();
+  // vi.useRealTimers();
+  cleanup();
+});

package.json

@@ -36,29 +36,35 @@
     "lint:fix": "npm run lint -- --fix",
     "format": "echo 'Prettier has not been configured for this app.'",
     "typecheck": "tsc --noEmit",
-    "test": "echo 'There is no testing suite set up for this app.'"
+    "test": "vitest --pool forks",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "beeftools": "^0.1.7",
+    "beeftools": "^0.1.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-state": "^2.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.16.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "eslint": "^9.16.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.13.0",
+    "jsdom": "^25.0.1",
     "lightningcss": "^1.28.2",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.17.0",
-    "vite": "^6.0.2",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8",
     "vite-plugin-svgr": "^4.3.0"
   }
 }

src/App.test.tsx

@@ -0,0 +1,15 @@
+import {describe, it} from 'vitest';
+import {render, screen} from '@testing-library/react';
+
+function App() {
+  return <p>Hello World!</p>;
+}
+
+describe('App', () => {
+  it('renders the App component', () => {
+    render(<App />);
+
+    // Prints out the JSX in the App component.
+    screen.debug();
+  });
+});

src/App.tsx

@@ -7,8 +7,8 @@ import {Footer} from '@src/components/sections/Footer/Footer.tsx';
 import {Header} from '@src/components/sections/Header/Header.tsx';
 import {Main} from '@src/components/sections/Main/Main.tsx';
 
-import {AccordionTest} from '@src/components/ui/Accordion/Accordion.test.tsx';
-import {ButtonTest} from '@src/components/ui/Button/Button.test.tsx';
+import {AccordionTest} from '@src/components/ui/Accordion/AccordionTest.tsx';
+import {ButtonTest} from '@src/components/ui/Button/ButtonTest.tsx';
 
 import styles from './App.module.css';
 

src/components/ui/Accordion/Accordion.test.tsx → src/components/ui/Accordion/AccordionTest.tsx

@@ -1,6 +1,6 @@
 import {Accordion} from './Accordion.tsx';
 import {AccordionList} from './AccordionList.tsx';
-import {MOCK_ACCORDION} from './Accordion.test.data.ts';
+import {MOCK_ACCORDION} from './AccordionTest.data.ts';
 
 export function AccordionTest() {
   return (

tsconfig.node.json

@@ -20,5 +20,10 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts", "eslint.config.mjs"]
+  "include": [
+    "config",
+    "eslint.config.mjs",
+    "vite.config.ts",
+    "vitest.config.ts"
+  ]
 }

vitest.config.ts

@@ -0,0 +1,17 @@
+import {defineConfig, mergeConfig} from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      globals: true,
+      setupFiles: 'config/tests-setup',
+      // Not running tests concurrently because we would
+      // need to refactor many tests to more thoroughly reset
+      // between each test.
+      // sequence: {concurrent: true},
+    },
+  }),
+);