Set up Testing

.github/workflows/vite.yml

@@ -0,0 +1,31 @@
+name: Atlas 3.0 CI
+
+on:
+  pull_request:
+    branches:
+      - main
+      - epic/*
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.draft == false
+
+    env:
+      VITE_IGNORE_MSW: false
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run Vitest
+        run: yarn vitest

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.18.0",
@@ -18,6 +19,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.2.1",
     "@types/node": "^20.11.13",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
@@ -28,8 +30,10 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^24.0.0",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vitest": "^1.2.2"
   },
   "msw": {
     "workerDirectory": [

src/main.tsx

@@ -12,7 +12,7 @@ async function enableMocking() {
     return
   }
 
-  const { worker } = await import('./mocks/browser.ts')
+  const { worker } = await import('./mocks/worker')
 
   return worker.start()
 }

src/mocks/browser.ts → src/mocks/handlers.ts

@@ -1,20 +1,14 @@
 //src/mocks/browser.js
 
-import { setupWorker } from "msw/browser"
 import { http, HttpResponse } from "msw"
 import resolveURL from "../api/fetch.ts";
 
 
-const handlers = [
+export const handlers = [
     http.get(resolveURL('/resource'), () => {
         return HttpResponse.json({
             result: "Hello World!"
         })
     })
 ]
 
-export const worker = setupWorker(...handlers)
-
-worker.events.on("request:start", ({ request }) => {
-    console.log('MSW intercepted: ', request.method, request.url)
-})

src/mocks/server.ts

@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node'
+import { handlers } from "./handlers";
+
+
+export const server = setupServer(...handlers)

src/mocks/worker.ts

@@ -0,0 +1,8 @@
+import { setupWorker, SetupWorker } from "msw/browser"
+import { handlers } from "./handlers.ts"
+
+export const worker: SetupWorker = setupWorker(...handlers)
+
+worker.events.on("request:start", ({ request }) => {
+  console.log('MSW intercepted: ', request.method, request.url)
+})

tests/test.test.tsx

@@ -0,0 +1,17 @@
+import {beforeEach, describe, expect, test } from "vitest"
+import {render, screen} from "@testing-library/react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import App from "../src/App"
+
+const queryClient = new QueryClient()
+
+describe("Vitest Test", () => {
+
+  beforeEach(() => {
+    render(<QueryClientProvider client={queryClient}><App></App></QueryClientProvider>)
+  })
+
+  test("Should show Hello World!", async () => {
+    expect(await screen.findByText(/Hello World!/)).toBeDefined()
+  })
+})

vite.config.ts

@@ -1,7 +1,15 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"]
+  }
 })

vitest.setup.ts

@@ -0,0 +1,6 @@
+import { afterAll, afterEach, beforeAll } from 'vitest'
+import { server } from "./src/mocks/server"
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+afterAll(() => server.close())
+afterEach(() => server.resetHandlers())