feat: start adding tests

packages/frontend/package.json

@@ -8,6 +8,8 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "start": "tsc && vite build --mode development --watch --sourcemap true",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "test:e2e": "start-server-and-test 'npm run preview' http-get://localhost:4173 'cypress run'"
   },
   "dependencies": {
@@ -43,6 +45,7 @@
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "@vitest/coverage-c8": "~0.25.8",
+    "@vitest/coverage-v8": "^0.34.6",
     "@vitest/ui": "^0.25.8",
     "cypress": "^12.13.0",
     "env-cmd": "^10.1.0",

packages/frontend/src/components/Header.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+
+import Header from './Header'
+
+describe('Header', () => {
+  it('should display web app logo', async () => {
+    render(<Header />)
+    expect(screen.queryByRole('img', { name: 'logo' })).toBeInTheDocument()
+  })
+
+  it('should display web app title', async () => {
+    render(<Header />)
+    expect(screen.queryByText('Topos Faucet')).toBeInTheDocument()
+  })
+})

packages/frontend/tsconfig.json

@@ -20,7 +20,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "src/vite-env.d.ts", "__mocks__"],
   "references": [{ "path": "./tsconfig.node.json" }],
   "ts-node": {
     "compilerOptions": {

packages/frontend/vite.config.ts

@@ -1,7 +1,16 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts',
+    // you might want to disable it, if you don't have tests that rely on CSS
+    // since parsing CSS is slow
+    css: true,
+  },
 })