From cbd5bf8d94200872b169b0aaae1e99af62d4d52a Mon Sep 17 00:00:00 2001 From: Xela Date: Tue, 21 Apr 2026 15:59:14 -0800 Subject: [PATCH] fix(frontend): use import.meta.env.MODE instead of DEV for testid directive During E2E testing with Playwright (via `mage test:e2e`), the frontend is built using Vite with `--mode development`. However, Vite hardcodes `process.env.NODE_ENV` to `production` during the build step, which causes `import.meta.env.DEV` to statically evaluate to `false`. Because the `v-cy` custom testing directive relied on the `DEV` flag, it silently evaluated to false and failed to render the `data-cy` attributes into the DOM during the test build. This caused test failures because Playwright could not locate the elements. Changing the check to explicitly evaluate `import.meta.env.MODE === 'development'` successfully bypasses the Vite build behavior, ensuring that `data-cy` testing attributes are consistently rendered during E2E tests. For more context on Vite's build behavior regarding `DEV` and development mode, see: https://github.com/vitejs/vite/discussions/14083 --- frontend/src/directives/testid.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/directives/testid.ts b/frontend/src/directives/testid.ts index 0c33af391..7219134d4 100644 --- a/frontend/src/directives/testid.ts +++ b/frontend/src/directives/testid.ts @@ -10,7 +10,7 @@ declare global { // In dev mode, always enable. In production, check window.TESTING which can be // injected into index.html before serving (e.g., by CI or test runner) function isTestingEnabled(): boolean { - return import.meta.env.DEV || window.TESTING === true + return import.meta.env.MODE === 'development' || window.TESTING === true } const testIdDirective = >{