diff --git a/apps/planner/app/lib/elevation-chart-draw.browser.test.tsx b/apps/planner/app/lib/elevation-chart-draw.browser.test.tsx index 04735b6..1327f41 100644 --- a/apps/planner/app/lib/elevation-chart-draw.browser.test.tsx +++ b/apps/planner/app/lib/elevation-chart-draw.browser.test.tsx @@ -1,6 +1,6 @@ -import { describe, it, expect } from "vitest"; -import { render } from "@testing-library/react"; -import { page } from "@vitest/browser/context"; +import { describe, it, expect, afterEach } from "vitest"; +import { render, cleanup } from "@testing-library/react"; +import { page } from "vitest/browser"; import { drawElevationChart } from "./elevation-chart-draw"; import type { DrawChartParams } from "./elevation-chart-draw"; @@ -46,6 +46,7 @@ function ChartFixture({ params }: { params: DrawChartParams }) { } describe("drawElevationChart visual regression", () => { + afterEach(() => cleanup()); it("renders plain color mode", async () => { render(); await expect(page.getByTestId("chart")).toMatchScreenshot("plain.png"); diff --git a/apps/planner/package.json b/apps/planner/package.json index a2093e2..f751906 100644 --- a/apps/planner/package.json +++ b/apps/planner/package.json @@ -55,6 +55,7 @@ "@types/react-dom": "catalog:", "@types/ws": "^8.18.1", "@vitest/browser": "^4.1.5", + "@vitest/browser-playwright": "^4.1.5", "leaflet.markercluster": "^1.5.3", "pino-pretty": "^13.1.3", "tailwindcss": "catalog:", diff --git a/apps/planner/vitest.browser.config.ts b/apps/planner/vitest.browser.config.ts index 06b8978..4e28a5a 100644 --- a/apps/planner/vitest.browser.config.ts +++ b/apps/planner/vitest.browser.config.ts @@ -1,5 +1,6 @@ import { defineConfig } from "vitest/config"; import { resolve } from "node:path"; +import { playwright } from "@vitest/browser-playwright"; // Separate config for Vitest browser visual regression tests. // Run with: pnpm --filter @trails-cool/planner test:visual @@ -10,8 +11,8 @@ import { resolve } from "node:path"; // (.github/workflows/update-visual-snapshots.yml), triggered manually or // by adding the `update-snapshots` label to a PR. export default defineConfig({ - esbuild: { - jsx: "automatic", + oxc: { + transform: { react: {} }, }, resolve: { alias: { @@ -23,10 +24,7 @@ export default defineConfig({ include: ["app/**/*.browser.test.{ts,tsx}"], browser: { enabled: true, - // Provider is resolved from whichever @vitest/browser peer is installed. - // playwright is the default when @playwright/test is available. - // eslint-disable-next-line @typescript-eslint/no-explicit-any - provider: "playwright" as any, + provider: playwright(), instances: [{ browser: "chromium" }], }, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c3059ad..f46ec23 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -196,7 +196,7 @@ importers: version: 8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4) vitest: specifier: ^4.1.5 - version: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)) + version: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(@vitest/browser-playwright@4.1.5)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)) apps/journal: dependencies: @@ -568,7 +568,10 @@ importers: version: 8.18.1 '@vitest/browser': specifier: ^4.1.5 - version: 4.1.5(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))) + version: 4.1.5(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5) + '@vitest/browser-playwright': + specifier: ^4.1.5 + version: 4.1.5(playwright@1.59.1)(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5) leaflet.markercluster: specifier: ^1.5.3 version: 1.5.3(leaflet@1.9.4) @@ -3936,6 +3939,12 @@ packages: peerDependencies: vite: ^6.0.0 || ^7.0.0 || ^8.0.0 + '@vitest/browser-playwright@4.1.5': + resolution: {integrity: sha512-CWy0lBQJq97nionyJJdnaU4961IXTl43a7UCu5nHy51IoKxAt6PVIJLo+76rVl7KOOgcWHNkG4kbJu/pW7knvA==} + peerDependencies: + playwright: '*' + vitest: 4.1.5 + '@vitest/browser@4.1.5': resolution: {integrity: sha512-iCDGI8c4yg+xmjUg2VsygdAUSIIB4x5Rht/P68OXy1hPELKXHDkzh87lkuTcdYmemRChDkEpB426MmDjzC0ziA==} peerDependencies: @@ -11741,7 +11750,20 @@ snapshots: dependencies: vite: 8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4) - '@vitest/browser@4.1.5(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)))': + '@vitest/browser-playwright@4.1.5(playwright@1.59.1)(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)': + dependencies: + '@vitest/browser': 4.1.5(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5) + '@vitest/mocker': 4.1.5(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)) + playwright: 1.59.1 + tinyrainbow: 3.1.0 + vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(@vitest/browser-playwright@4.1.5)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)) + transitivePeerDependencies: + - bufferutil + - msw + - utf-8-validate + - vite + + '@vitest/browser@4.1.5(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)': dependencies: '@blazediff/core': 1.9.1 '@vitest/mocker': 4.1.5(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)) @@ -11750,7 +11772,7 @@ snapshots: pngjs: 7.0.0 sirv: 3.0.2 tinyrainbow: 3.1.0 - vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)) + vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(@vitest/browser-playwright@4.1.5)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)) ws: 8.20.0 transitivePeerDependencies: - bufferutil @@ -16125,7 +16147,7 @@ snapshots: tsx: 4.21.0 yaml: 2.8.4 - vitest@4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)): + vitest@4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.2)(@vitest/browser-playwright@4.1.5)(jsdom@29.1.1(canvas@3.2.3))(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)): dependencies: '@vitest/expect': 4.1.5 '@vitest/mocker': 4.1.5(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)) @@ -16150,6 +16172,7 @@ snapshots: optionalDependencies: '@opentelemetry/api': 1.9.1 '@types/node': 25.6.2 + '@vitest/browser-playwright': 4.1.5(playwright@1.59.1)(vite@8.0.10(@types/node@25.6.2)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5) jsdom: 29.1.1(canvas@3.2.3) transitivePeerDependencies: - msw