Support Vitest `projects` option for Browser Mode
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 437
- Forks
- 120
- Avg merge
- 22h 52m
- Merged PRs (30d)
- 23
Description
Describe the feature
I'd like to run multiple Vitest projects.
Currently there is no documentation for how to support multiple Nuxt test utils projects. There's a method defineVitestProject which sounds great, but it's not documented. I'm getting an exception when I try to use it, so I'm not sure if it's broken or if I'm using it wrong.
Desired Functionality
I would like to:
Kick off a suite of Nuxt-environment (node-based) unit tests(this works)- Kick off a suite of Nuxt Browser Mode component tests (throws exception during cleanup, see comment below)
Kick off a suite of Nuxt e2e tests(this works)
Attempted Configuration
The syntax that I believe should cause this to happen is something along the lines of the following:
import { defineVitestProject } from '@nuxt/test-utils/config'
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
projects: [
defineVitestProject({
test: {
browser: {
enabled: true,
provider: 'playwright',
instances: [{ browser: 'chromium' }],
},
environment: 'nuxt',
include: ['**/*.browser.test.{ts,js}'],
setupFiles: ['vitest-browser-vue'],
name: 'component',
}
}),
defineVitestProject({
test: {
include: ['**/*.unit.test.{ts,js}'],
name: 'unit',
environment: 'nuxt',
}
}),
defineVitestProject({
test: {
include: ['**/*.e2e.test.{ts,js}'],
name: 'e2e',
environment: 'nuxt',
}
})
]
}
})
Results
When I run pnpm vitest run, my suite works, and then I get an error that says "Cannot set properties of undefined (setting 'PROD')" and the process exits with an error code.
Workaround
Using defineVitestConfig and hoisting the configuration up to root works fine. Unfortunately I'd need to run three Vitest tasks and couldn't make use of the projects functionality.
For example:
pnpm vitest --config vitest.browser.config.ts
pnpm vitest --config vitest.unit.config.ts
pnpm vitest --config vitest.e2e.config.ts
# 😔
So, I can't figure out how to get it working. I've tried different combinations, singular projects, and using the deprecated workspaces key. The method defineVitestProject isn't documented and I've read through the code and I'm not really sure why I'm getting an error.
Nuxt Info
- Operating System: `Darwin`
- Node Version: `v22.14.0`
- Nuxt Version: `3.17.5`
- CLI Version: `3.25.1`
- Nitro Version: `2.11.12`
- Package Manager: `pnpm@10.11.1`
- Builder: `-`
- User Config: `compatibilityDate`, `modules`
- Runtime Modules: `@nuxt/test-utils/module@3.19.1`
- Build Modules: `-`
Additional information
- Would you be willing to help implement this feature?
- Could this feature be implemented as a module?
Final checks
- Read the contribution guide.
- Check existing discussions and issues.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with @nuxt/test-utils/config's defineVitestProject and the Browser Mode cleanup path; reproduce the three-project configuration with pnpm vitest run. Done means Nuxt unit, browser component, and e2e projects run together without the cleanup exception or a failing exit code.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- playwright, typescript
- Domain
- testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100