nuxt / test-utils

🧪 Test utilities for Nuxt
http://nuxt.com/docs/getting-started/testing
MIT License
323 stars 84 forks source link

Playwright tests fail with nitro preset azure #908

Open WatCodeDatCode opened 4 months ago

WatCodeDatCode commented 4 months ago

Environment

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

dosubot[bot] commented 4 months ago

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.