e2e tests fail with .config/nuxt.ts

[nathanchase]

Environment

Reproduction: https://stackblitz.com/edit/github-gu1sj1?file=tests%2Fbasic.e2e.test.ts

I can't seem to utilize the alternative nuxt.config location with @nuxt/test-utils. If I have my nuxt.config as ./.config/nuxt.ts, e2e tests will always fail with Error: Invalid nuxt app. (Please explicitly set 'options.rootDir' pointing to a valid nuxt app).

This is my test:

// ./tests/basic.e2e.test.ts
import { $fetch, setup } from '@nuxt/test-utils/e2e';
import { describe, expect, it } from 'vitest';

describe('basic', async () => {
  await setup({
    rootDir: './app',
    configFile: '/.config/nuxt.ts',
  });

  it('contains Welcome to Nuxt! string', async () => {
    const html = await $fetch('/');
    expect(html).toContain('Welcome to Nuxt!');
  });
});

and my nuxt.config:

// ./.config/nuxt.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4,
  },
  modules: ['@nuxt/test-utils/module'],
});

If I move and rename nuxt.config back to the root, it works.

I'm not sure if this is a limitation or expectation of test-utils of the config file name/location that isn't being honored by the configFile setting, or what.

Reproduction

https://stackblitz.com/edit/github-gu1sj1?file=tests%2Fbasic.e2e.test.ts

Describe the bug

Using alternative nuxt.config name/location causes e2e tests to fail.

Additional context

No response

Logs

No response

[dosubot]

Hey @nathanchase! I'm here to assist you with any issues you may have. I can help you solve bugs, answer questions, and become a contributor. Let me know how I can help you with the Nuxt configuration problem you're experiencing.

To resolve the issue with using an alternative nuxt.config file location in your end-to-end tests with @nuxt/test-utils, you need to ensure that the configFile option is correctly specified within the environmentOptions under the nuxt key. Here is how you can modify your test setup:

// ./tests/basic.e2e.test.ts
import { $fetch, setup } from '@nuxt/test-utils/e2e';
import { describe, expect, it } from 'vitest';

describe('basic', async () => {
  await setup({
    rootDir: './app',
    environmentOptions: {
      nuxt: {
        configFile: './.config/nuxt.ts', // Ensure the correct path to your config file
      },
    },
  });

  it('contains Welcome to Nuxt! string', async () => {
    const html = await $fetch('/');
    expect(html).toContain('Welcome to Nuxt!');
  });
});

Make sure the path to your nuxt.config file is correct and relative to the root directory of your project. This should allow @nuxt/test-utils to correctly locate and use your alternative nuxt.config file ^[1].

To continue talking to Dosu, mention @dosu.

[nathanchase]

environmentOptions: {
      nuxt: {
        configFile: './.config/nuxt.ts', // Ensure the correct path to your config file
      },
    },

environmentOptions is not a property of the setup() function's options. The correct property is configFile, accoding to the docs: https://nuxt.com/docs/getting-started/testing#nuxt-config

[dosubot]

You are correct. The configFile option should be used directly in the setup function. Here is the corrected version of your test setup:

// ./tests/basic.e2e.test.ts
import { $fetch, setup } from '@nuxt/test-utils/e2e';
import { describe, expect, it } from 'vitest';

describe('basic', async () => {
  await setup({
    rootDir: './app',
    configFile: './.config/nuxt.ts', // Ensure the correct path to your config file
  });

  it('contains Welcome to Nuxt! string', async () => {
    const html = await $fetch('/');
    expect(html).toContain('Welcome to Nuxt!');
  });
});

Make sure the path to your nuxt.config file is correct and relative to the root directory of your project. This should allow @nuxt/test-utils to correctly locate and use your alternative nuxt.config file ^[1].

To continue talking to Dosu, mention @dosu.

[danielroe]

rootDir should not point to app/ (which is the srcDir, not the rootDir, of your Nuxt app)

[nathanchase]

rootDir should not point to app/ (which is the srcDir, not the rootDir, of your Nuxt app)

If I set rootDir to '/', or './', or even if I leave the rootDir out of the declaration, it still produces the same error of Error: Invalid nuxt app. (Please explicitly set 'options.rootDir' pointing to a valid nuxt app)

 await setup({
    configFile: '/.config/nuxt.ts',
  });