test: use @vitest/browser and setup test linting (#127)

.github/workflows/build.yaml

@@ -16,6 +16,7 @@ jobs:
       - uses: oven-sh/setup-bun@v1
 
       - run: bun install --frozen-lockfile
+      - run: bun playwright install
       - run: timeout 12s bun pre-commit
       - run: bun run test
       - run: ./check-lines.sh

eslint.config.js

@@ -3,8 +3,9 @@ import globals from 'globals'
 import js from '@eslint/js'
 import ts from 'typescript-eslint'
 import tailwind from 'eslint-plugin-tailwindcss'
-import solid from 'eslint-plugin-solid/configs/typescript.js'
+import solid from 'eslint-plugin-solid/configs/typescript'
 import stylistic from '@stylistic/eslint-plugin'
+import vitest from '@vitest/eslint-plugin'
 
 export default [
   {
@@ -65,4 +66,24 @@ export default [
       ],
     },
   },
+  {
+    files: ['src/**/*.test.*'],
+    plugins: {
+      vitest,
+    },
+    languageOptions: {
+      globals: {
+        ...vitest.environments.env.globals,
+      },
+    },
+    rules: {
+      ...vitest.configs.recommended.rules,
+      '@typescript-eslint/unbound-method': 'off',
+    },
+    settings: {
+      vitest: {
+        typecheck: true,
+      },
+    },
+  },
 ]

package.json

@@ -26,6 +26,8 @@
     "@types/mapbox__polyline": "types for mapbox elements",
     "@typescript-eslint/eslint-plugin": "ESLint rules for TS",
     "@typescript-eslint/parser": "allows ESLint to parse TS",
+    "@vitest/browser": "run vitest suite in browser using playwright",
+    "@vitest/eslint-plugin": "linting rules for vitest suite",
     "autoprefixer": "adds css vendor prefixes automatically",
     "eslint": "linting engine",
     "eslint-plugin-solid": "ESLint rules specific to solid",
@@ -45,19 +47,21 @@
     "wrangler": "used for deploying assets to cloudflare"
   },
   "devDependencies": {
-    "@solidjs/testing-library": "^0.8.8",
+    "@solidjs/testing-library": "^0.8.10",
     "@stylistic/eslint-plugin": "^2.1.0",
     "@types/eslint__js": "^8.42.3",
     "@types/mapbox__polyline": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
+    "@vitest/browser": "^2.1.8",
+    "@vitest/eslint-plugin": "^1.1.24",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.4.0",
-    "eslint-plugin-solid": "^0.14.0",
+    "eslint-plugin-solid": "^0.14.5",
     "eslint-plugin-tailwindcss": "^3.17.3",
     "globals": "^15.4.0",
     "husky": "^9.0.11",
-    "jsdom": "^24.1.0",
+    "jsdom": "^26.0.0",
     "playwright": "^1.44.1",
     "postcss": "^8.4.38",
     "solid-devtools": "^0.30.1",
@@ -66,7 +70,7 @@
     "typescript-eslint": "^7.13.0",
     "vite": "^5.2.13",
     "vite-plugin-solid": "^2.10.2",
-    "vitest": "^1.6.0",
+    "vitest": "^2.1.8",
     "wrangler": "^3.60.2"
   },
   "//dependencies": {

src/App.browser.test.tsx

@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest'
+import { configure, render } from '@solidjs/testing-library'
+
+import App from './App'
+
+beforeAll(() => {
+  configure({ asyncUtilTimeout: 2000 })
+})
+
+test('Show login page', () => {
+  const { findByText } = render(() => <App />)
+  expect(findByText('Sign in with Google')).not.toBeFalsy()
+})

vite.config.ts

@@ -20,8 +20,4 @@ export default defineConfig({
       '~': '/src',
     },
   },
-  test: {
-    environment: 'jsdom',
-    setupFiles: './src/test/setup.ts',
-  },
 })

vitest.workspace.ts

@@ -0,0 +1,34 @@
+import { configDefaults, defineWorkspace } from 'vitest/config'
+
+export default defineWorkspace([
+  {
+    extends: 'vite.config.ts',
+    test: {
+      include: [
+        'src/**/*.{test,spec}.ts',
+        'src/**/*.unit.{test,spec}.ts',
+      ],
+      exclude: [
+        ...configDefaults.exclude,
+        '**/*.browser.{test,spec}.{ts,tsx}',
+      ],
+      name: 'unit',
+      environment: 'node',
+      setupFiles: './src/test/setup.ts',
+    },
+  },
+  {
+    extends: 'vite.config.ts',
+    test: {
+      include: [
+        '**/*.browser.{test,spec}.{ts,tsx}',
+      ],
+      browser: {
+        provider: 'playwright',
+        enabled: true,
+        headless: true,
+        name: 'chromium',
+      },
+    },
+  },
+])