Playwright tests fail with nitro preset azure
Environment
- Operating System: Windows_NT
- Node Version: v18.17.1
- Nuxt Version: 3.12.4
- CLI Version: 3.12.0
- Nitro Version: -
- Package Manager: [email protected]
- Builder: -
- User Config: future, compatibilityDate, devtools, nitro, extends, runtimeConfig, $test, modules, i18n, typescript, tailwindcss
- Runtime Modules: @vueuse/[email protected], @nuxtjs/[email protected], @nuxt/test-utils/[email protected]
- Build Modules: -
Reproduction
https://codesandbox.io/p/devbox/modest-stonebraker-m9jvcl?file=%2Fplaywright.config.ts%3A13%2C1&workspaceId=7242797e-8630-4ea5-a2a8-c0ae92eb9b43
Describe the bug
When using the built-in utils from @nuxt/test-utils/playwright using the azure preset for nitro, running pnpm exec playwright test fails with:
Error: Cannot find module '/.nuxt/test/xxxx/output/server/index.mjs'
I have tried to point it to the location set when using azure through the nuxt configs in playwright.config.ts but the same suffix including server/index.mjs keeps being appended so no entry point is found.
Additional context
Overwriting the preset through nuxtConfig to use node-server in playwright.config.ts or using the utils directly from @playwright/test and replacing nuxt configs with a webServer running against azure CLI built preview works, but neither one of these are ideal solutions.
Logs
No response
Hey @WatCodeDatCode! I'm here to help you with any bugs, questions, or contributions. Let's work together to solve the issue you're facing.
To resolve the issue with Playwright tests failing due to the incorrect module path when using the Nitro preset for Azure in your Nuxt 3.12.4 project, you can ensure that the module paths are correctly specified in your package.json file. The exports field in the package.json of @nuxt/test-utils should correctly map the module paths.
Here is the relevant section from the package.json:
{
"exports": {
".": "./dist/e2e.mjs",
"./config": "./dist/config.mjs",
"./e2e": "./dist/e2e.mjs",
"./playwright": "./dist/playwright.mjs",
"./experimental": "./dist/experimental.mjs",
"./module": "./dist/module.mjs",
"./runtime": "./dist/runtime-utils/index.mjs",
"./vitest-environment": "./dist/vitest-environment.mjs"
}
}
Ensure that these paths are correctly pointing to the respective modules. If there are any discrepancies or missing paths, you should update them accordingly. Additionally, you can configure your Playwright tests to use a preconfigured Nuxt fixture by extending the base test configuration as shown below:
import { test as base } from '@playwright/test'
import type { Page, Response } from 'playwright-core'
import type { GotoOptions, TestOptions as SetupOptions, TestHooks } from './e2e'
import { createTest, url, waitForHydration } from './e2e'
export type ConfigOptions = {
nuxt: Partial<SetupOptions> | undefined
}
type WorkerOptions = {
_nuxtHooks: TestHooks
}
type TestOptions = {
goto: (url: string, options?: GotoOptions) => Promise<Response | null>
}
export const test = base.extend<TestOptions, WorkerOptions & ConfigOptions>({
nuxt: [undefined, { option: true, scope: 'worker' }],
_nuxtHooks: [
async ({ nuxt }, use) => {
const hooks = createTest(nuxt || {})
await hooks.setup()
await use(hooks)
await hooks.afterAll()
}, { scope: 'worker' },
],
baseURL: async ({ _nuxtHooks }, use) => {
_nuxtHooks.beforeEach()
await use(url('/'))
_nuxtHooks.afterEach()
},
goto: async ({ page }, use) => {
await use(async (url, options) => {
const waitUntil = options?.waitUntil
if (waitUntil && ['hydration', 'route'].includes(waitUntil)) {
delete options.waitUntil
}
const response = await page.goto(url, options as Parameters<Page['goto']>[1])
await waitForHydration(page, url, waitUntil)
return response
})
},
})
export { expect } from '@playwright/test'
This configuration ensures that your Playwright tests are correctly set up to work with Nuxt, addressing any module path issues [1][2].
To continue talking to Dosu, mention @dosu.