Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Playwright tests fail with nitro preset azure #908

Open
WatCodeDatCode opened this issue Aug 1, 2024 · 1 comment
Open

Playwright tests fail with nitro preset azure #908

WatCodeDatCode opened this issue Aug 1, 2024 · 1 comment
Labels
bug Something isn't working pending triage

Comments

@WatCodeDatCode
Copy link

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

@dosubot dosubot bot added the bug Something isn't working label Aug 1, 2024
Copy link

dosubot bot commented Aug 1, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working pending triage
Projects
None yet
Development

No branches or pull requests

1 participant