Vitest config not used in dev tools

[peerhenry]

Environment

• Operating System: Windows_NT
• Node Version: v20.11.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.4.0
• Builder: -
• User Config: devtools, modules, imports, ignore
• Runtime Modules: @nuxtjs/tailwindcss@6.12.0, @pinia/nuxt@0.5.1, @nuxt/test-utils@3.12.1
• Build Modules: -

Reproduction

NOTE: No configuration from vitest.config.ts is used when running with the devtools, the following steps will only demonstrate that for a configuration that excludes a test folder, but you can try any configuration you want.

STEPS TO REPRODUCE:

• Setup a nuxt project with npm.
• Run:

npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core

• Add module to nuxt config: '@nuxt/test-utils'
• Create a file e2e/dummy.test.ts:

// e2e/dummy.test.ts
import { describe, it, expect } from "vitest"

describe('adding', () => {
  it('should work', async () => {
    expect(2 + 2).toBe(4)
  })
})

• Create a file vitest.config.ts:

import { defineVitestConfig } from '@nuxt/test-utils/config'

export const testConfig = {
  environment: 'nuxt',
  exclude: [
    '**/node_modules/**',
    './e2e/**/*'
  ],
  setupFiles: ['./testglobals.js'],
}

export default defineVitestConfig({
  test: {
    exclude: [
      '**/node_modules/**',
      './e2e/**/*'
    ],
  }
})

• run npm run dev
• open dev tools and run vitest

EXPECTED:

vitest.config.ts is used and the test e2e/dummy.test.ts is not executed.

ACTUAL:

e2e/dummy.test.ts is in the test report.

Describe the bug

When running vitest from the dev tools, vitest.config.ts is not loaded.

Additional context

I was able to get a vitest config to work with the devtools by manipulating the nuxt config as follows:

// nuxt.config.ts
const testConfig = {
  environment: 'nuxt',
  exclude: [
    '**/node_modules/**',
    './e2e/**/*'
  ],
}

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    ['@nuxt/test-utils', { vitestConfig: testConfig }],
  ],
})

I did not find any documentation about this and only discovered this option by painstakingly diving into the source of the test utils module.

Logs

No response

[dosubot]

To address the issue where your vitest.config.ts is not being used when running Vitest from the Nuxt dev tools, follow these targeted steps:

1. Confirm the Location of vitest.config.ts: Ensure this file is in the root of your Nuxt project. Its correct placement is crucial for Vitest to recognize and use it.

2. Explicitly Specify Configuration File: If automatic detection fails, run Vitest with the --config flag followed by the path to your vitest.config.ts, like so:

   vitest run --config vitest.config.ts

3. Check for Compatibility: Make sure the versions of Nuxt and Vitest you're using are compatible. Incompatibilities could lead to issues with configuration loading.

4. Review Your Configuration for Errors: Ensure there are no syntax errors or typos in your vitest.config.ts that could prevent it from being loaded.

5. Consult Documentation: Both Vitest and Nuxt are actively developed, and their integration points can change. Review the latest documentation for any updates or changes that might affect configuration loading.

Additionally, consider defining Nuxt configuration overrides in your vitest.config.ts via test.environmentOptions.nuxt for specifying additional configurations needed for running tests. This approach can help in cases where you need to adjust the Nuxt environment for your tests without altering the default nuxt.config.

By following these steps, you should be able to resolve the issue with vitest.config.ts not being recognized during test runs from the Nuxt dev tools.

Details

Sources

• defineVitestConfig not respecting custom configFile
• examples/content/vitest.config.ts
• package.json
• src/config.ts
• CHANGELOG.md
• src/module.ts

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.