Merge pull request #53 from UoaWDCC/setup/test

setup vitest, jest and react testing library for testing

web/__test__/ExecScreen.test.tsx

@@ -0,0 +1,15 @@
+import { expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import ExecScreen from "../src/screens/ExecScreen";
+import { describe } from "node:test";
+import { execs } from "../src/data/data";
+
+describe("ExecScreen component", () => {
+  it("should display President", () => {
+    render(<ExecScreen execs={execs} />);
+    const message = screen.getAllByText(/President/i);
+    const president = message[0];
+    expect(president).toBeInTheDocument();
+  });
+});

web/__test__/TestScreen.test.tsx

@@ -0,0 +1,13 @@
+import { expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import TestScreen from "../src/screens/Test";
+import { describe } from "node:test";
+
+describe("TestScreen component", () => {
+  it("should display the 'Test' message", () => {
+    render(<TestScreen />);
+    const message = screen.getByText(/Test/i);
+    expect(message).toBeInTheDocument();
+  });
+});

web/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.18.1",
@@ -24,6 +25,9 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
@@ -34,9 +38,11 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^24.1.0",
     "postcss": "^8.4.34",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vitest": "^1.6.0"
   }
 }

web/tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vitest/globals"],
 
     "paths": {
       "@utils/*": ["./src/utils/*"],

web/vite.config.ts

@@ -1,16 +1,19 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc';
+/// <reference types="vitest" />
+
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      '@utils': '/src/utils',
-      '@components': '/src/components',
-      '@pages': '/src/pages',
-      '@contexts': '/src/contexts',
-      '@layouts': '/src/layouts',
+      "@utils": "/src/utils",
+      "@components": "/src/components",
+      "@pages": "/src/pages",
+      "@contexts": "/src/contexts",
+      "@layouts": "/src/layouts",
+      "@screens": "/src/screens",
     },
   },
 });

web/vitest.config.ts

@@ -0,0 +1,13 @@
+/// <reference types="vitest" />
+/// <reference types = "vite/client" />
+
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"],
+    css: true,
+  },
+});

web/vitest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";