Help in migration to Nuxt 4, error in testing part

Hi, I havent found what is the correct architrcture for test folder and what would have changed in v4. After updating folder architacture the test completely fails with this error No test files found. You can change the file name pattern by pressing "p" include: /*.{test,spec}.?(c|m)[jt]s?(x) exclude: /node_modules/, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, /{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*
38 Replies
kapa.ai
kapa.ai6d ago
Hi @eleonorazhyrlitsyna. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When migrating to Nuxt 4, the default directory structure and the way tests are organized have changed. This can affect how your test runner (like Vitest) discovers test files, which is likely the cause of your "No test files found" error. New Recommended Test Folder Structure With Nuxt 4, it is recommended to organize your tests using a project-based structure, typically like this:
test/
├── e2e/
│ └── ssr.test.ts
├── nuxt/
│ ├── components.test.ts
│ └── composables.test.ts
├── unit/
│ └── utils.test.ts
test/
├── e2e/
│ └── ssr.test.ts
├── nuxt/
│ ├── components.test.ts
│ └── composables.test.ts
├── unit/
│ └── utils.test.ts
- unit/: For pure unit tests (Node environment). - nuxt/: For tests that require the Nuxt runtime environment. - e2e/: For end-to-end tests. This separation is important for test stability, as different environments are used for different types of tests. The Nuxt docs provide more details and examples for this structure here. Vitest Configuration Example Your vitest.config.ts should be updated to match the new structure. Here’s an example from the docs:
import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'
export default defineConfig({
test: {
projects: [
{
test: {
name: 'unit',
include: ['test/{e2e,unit}/*.{test,spec}.ts'],
environment: 'node',
},
},
await defineVitestProject({
test: {
name: 'nuxt',
include: ['test/nuxt/*.{test,spec}.ts'],
environment: 'nuxt',
},
}),
],
},
})
import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'
export default defineConfig({
test: {
projects: [
{
test: {
name: 'unit',
include: ['test/{e2e,unit}/*.{test,spec}.ts'],
environment: 'node',
},
},
await defineVitestProject({
test: {
name: 'nuxt',
include: ['test/nuxt/*.{test,spec}.ts'],
environment: 'nuxt',
},
}),
],
},
})
This configuration ensures that Vitest looks for test files in the correct subfolders and runs them in the appropriate environment. If your test files are not in these locations or your config does not match, Vitest will not find them and you'll see the error you described. Migration Steps 1. Move your test files into the recommended test/nuxt/, test/unit/, and test/e2e/ folders. 2. Update your vitest.config.ts to match the new structure and include patterns. 3. Run your tests using npx vitest or the appropriate script. If you want all tests to run in the Nuxt environment, you can use a simpler config, but the project-based approach is recommended for clarity and stability. For more details, see the official Nuxt 4 testing documentation: Testing in Nuxt 4. --- Summary:
Your error is likely due to test files not being in the expected locations or your Vitest config not matching the new Nuxt 4 structure. Update both according to the guidance above and your tests should be discovered and run correctly. Source: Nuxt 4 Testing Docs ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai6d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai The test folder should be in root directory? @kapa.ai what versions of packages should be for these updates?
kapa.ai
kapa.ai6d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- For migrating to Nuxt 4 and updating your testing setup, the recommended package versions based on the official documentation and recent PRs are: - nuxt: ^4.0.0
(Install with: npm install nuxt@^4.0.0)
Upgrade Guide - @nuxt/test-utils: Use the latest available version for Nuxt 4. As of the most recent updates, versions like 3.19.x are referenced, and features such as Vitest workspaces are supported from v3.19.0 onward.
PR using v3.19.x
Recent update to v3.19.2 - vitest: No specific version is mandated in the docs, but compatibility with the latest @nuxt/test-utils (3.18.x and above) and Nuxt 4 is expected.
(Install with: npm i --save-dev vitest)
Testing Docs - @vue/test-utils: No specific version is mentioned, but it should be compatible with Vue 3 and Nuxt 4.
(Install with: npm i --save-dev @vue/test-utils)
Testing Docs - happy-dom or jsdom: Either can be used for the runtime environment.
(Install with: npm i --save-dev happy-dom)
Testing Docs - playwright-core: Only if you need browser testing utilities.
(Install with: npm i --save-dev playwright-core)
Testing Docs Summary Table: | Package | Recommended Version Example | |-----------------------|----------------------------| | nuxt | ^4.0.0 | | @nuxt/test-utils | ^3.19.2 | | vitest | latest | | @vue/test-utils | latest | | happy-dom / jsdom | latest | | playwright-core | latest (if needed) | If you want to ensure compatibility with the latest Nuxt 4 features and testing improvements, use the most recent versions of these packages as shown above. If you encounter issues, check the Nuxt 4 upgrade guide and the testing documentation for updates and troubleshooting steps. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai6d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai What can cause this error after updating config and architecture folder 3| import ExportMenu from '~/components/exportMenu.vue' | ^ 4| import InIcon from '~/components/in/icon.vue' 5| Caused by: Error: Failed to load url ~/components/exportMenu.vue (resolved id: ~/components/exportMenu.vue) in /usr/src/app/test/nuxt/components/exportMenu.test.js. Does the file exist?
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- The error
Error: Failed to load url ~/components/exportMenu.vue (resolved id: ~/components/exportMenu.vue) in /usr/src/app/test/nuxt/components/exportMenu.test.js. Does the file exist?
Error: Failed to load url ~/components/exportMenu.vue (resolved id: ~/components/exportMenu.vue) in /usr/src/app/test/nuxt/components/exportMenu.test.js. Does the file exist?
is most likely caused by changes in the Nuxt 4 directory structure and how the ~ alias is resolved. Key Points from the Knowledge Sources - In Nuxt 4, the ~ alias now points to the app/ directory by default (your srcDir). So ~/components resolves to app/components/, not the project root anymore. If your components directory is not inside app/, the alias will not resolve correctly and you'll get a "Does the file exist?" error New Directory Structure. - Your import should be:
import ExportMenu from '~/components/exportMenu.vue'

import ExportMenu from '~/components/exportMenu.vue'

if and only if the file is at app/components/exportMenu.vue in your project. - If you moved your components directory but did not update the alias or folder location, the import will fail. - Double-check that the file exists at the correct path relative to the new app/ directory. What to Check 1. File Location:
Ensure exportMenu.vue is at app/components/exportMenu.vue (not at the project root or elsewhere). 2. Import Path:
Use ~/components/exportMenu.vue only if the file is in app/components/. 3. Alias Configuration:
If you have a custom alias or changed the default, verify your nuxt.config.ts alias settings Nuxt Config Aliases. 4. Test Runner Context:
If your test runner is running from a different context or root, make sure it is aware of Nuxt's alias resolution. Summary This error is almost always due to the new Nuxt 4 directory structure and the change in what ~ points to. Move your components folder into app/ and the import should work as expected New Directory Structure. If you need to keep a different structure, adjust your alias in nuxt.config.ts accordingly Nuxt Config Aliases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai the relative path of component is app/components/exportMenu.vue
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Given that your component is located at app/components/exportMenu.vue, and you are using the import:
import ExportMenu from '~/components/exportMenu.vue'
import ExportMenu from '~/components/exportMenu.vue'
this should be correct in Nuxt 4, because the ~ alias now points to the app/ directory by default. So ~/components/exportMenu.vue resolves to app/components/exportMenu.vue New Directory Structure. If you are still seeing the error:
Error: Failed to load url ~/components/exportMenu.vue (resolved id: ~/components/exportMenu.vue) in /usr/src/app/test/nuxt/components/exportMenu.test.js. Does the file exist?
Error: Failed to load url ~/components/exportMenu.vue (resolved id: ~/components/exportMenu.vue) in /usr/src/app/test/nuxt/components/exportMenu.test.js. Does the file exist?
then possible causes include: 1. Test Runner Not Using Nuxt Context:
If you are running tests outside the Nuxt runtime environment (e.g., using plain Vitest or @vue/test-utils without Nuxt integration), the ~ alias will not be recognized. You must use the Nuxt test environment as described in the docs, which ensures aliases are resolved properly Unit Testing. 2. Incorrect Test File Location or Configuration:
Make sure your test files are in the correct directory (e.g., test/nuxt/) and your vitest.config.ts is set up to use the Nuxt environment for those tests. This is necessary for Nuxt-specific features like auto-imports and aliases to work Unit Testing. 3. File Name Casing:
Nuxt and some file systems are case-sensitive. Ensure the file is named exactly exportMenu.vue and not, for example, ExportMenu.vue. Summary:
If your file is at app/components/exportMenu.vue and you use ~/components/exportMenu.vue, this is correct for Nuxt 4. If you still get the error, ensure your tests are running in the Nuxt environment so that the ~ alias is recognized Unit Testing. If you are using plain Vitest or @vue/test-utils without Nuxt, the alias will not work. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai My file file is at app/components/exportMenu.vue and you use ~/components/exportMenu.vue and I still hasve error
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- If your file is at app/components/exportMenu.vue and you are importing it with:
import ExportMenu from '~/components/exportMenu.vue'
import ExportMenu from '~/components/exportMenu.vue'
this is the correct usage in Nuxt 4, as the ~ alias points to the app/ directory by default Nuxt Config Aliases. However, if you are still seeing the error:
Error: Failed to load url ~/components/exportMenu.vue (resolved id: ~/components/exportMenu.vue) in /usr/src/app/test/nuxt/components/exportMenu.test.js. Does the file exist?
Error: Failed to load url ~/components/exportMenu.vue (resolved id: ~/components/exportMenu.vue) in /usr/src/app/test/nuxt/components/exportMenu.test.js. Does the file exist?
the most likely cause, based on the knowledge sources, is that your test is not running in the Nuxt environment, so the ~ alias is not being resolved. The Nuxt documentation states that for tests to recognize Nuxt aliases, you must use the Nuxt test environment provided by @nuxt/test-utils and configure your vitest.config.ts accordingly Unit Testing. What to check: 1. Test Environment:
Ensure your test is in the test/nuxt/ directory and your vitest.config.ts includes a project with environment: 'nuxt' for that directory. Example:
import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'

export default defineConfig({
test: {
projects: [
await defineVitestProject({
test: {
name: 'nuxt',
include: ['test/nuxt/*.{test,spec}.ts'],
environment: 'nuxt',
},
}),
],
},
})

import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'

export default defineConfig({
test: {
projects: [
await defineVitestProject({
test: {
name: 'nuxt',
include: ['test/nuxt/*.{test,spec}.ts'],
environment: 'nuxt',
},
}),
],
},
})

Unit Testing 2. Running Tests:
Run your tests using npx vitest or the script defined in your package.json to ensure the Nuxt environment is used Running Tests. 3. File Name Casing:
Double-check that the file name matches exactly, as file systems can be case-sensitive. If you have confirmed all of the above and the error persists, the knowledge sources do not provide further troubleshooting steps for this specific scenario. The most common cause, according to the documentation, is not using the Nuxt test environment, which is required for Nuxt-specific aliases like ~ to work in tests. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai import { defineConfig } from 'vitest/config' import { defineVitestProject } from '@nuxt/test-utils/config' export default defineConfig({ test: { projects: [ { test: { name: 'unit', include: ['test/{e2e,unit}/.{test,spec}.ts'], environment: 'node', }, }, await defineVitestProject({ test: { environment: 'nuxt', include: ['test/nuxt/.{test,spec}.js'], globals: true, globalSetup: 'test/nuxt/test-globals.ts', setupFiles: ['test/nuxt/setup.ts'], }, }), ], }, }) testa in test/nuxt/.. directory, components in app/components/.. I've got error No test files found. You can change the file name pattern by pressing "p" unit
include: test/{e2e,unit}/.{test,spec}.ts exclude: /node_modules/, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.
1
include: test/nuxt/.{test,spec}.js exclude: /node_modules/, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Your error is caused by the include pattern in your Vitest config not matching your test files. Key issues: 1. Pattern Typo in Unit Project:
Your pattern for the unit project is:
include: ['test/{e2e,unit}/.{test,spec}.ts']

include: ['test/{e2e,unit}/.{test,spec}.ts']

This pattern is missing a * before .{test,spec}.ts, so it will not match any files. It should be:
include: ['test/{e2e,unit}/*.{test,spec}.ts']

include: ['test/{e2e,unit}/*.{test,spec}.ts']

2. File Extension Mismatch in Nuxt Project:
Your Nuxt project pattern is:
include: ['test/nuxt/*.{test,spec}.js']

include: ['test/nuxt/*.{test,spec}.js']

This will only match .js test files. If your tests are .ts files, you need:
include: ['test/nuxt/*.{test,spec}.{js,ts}']

include: ['test/nuxt/*.{test,spec}.{js,ts}']

Or, if you only use .ts:
include: ['test/nuxt/*.{test,spec}.ts']

include: ['test/nuxt/*.{test,spec}.ts']

What the knowledge sources say:
The Nuxt docs show the correct pattern as:
include: ['test/nuxt/*.{test,spec}.ts']
include: ['test/nuxt/*.{test,spec}.ts']
and for unit/e2e:
include: ['test/{e2e,unit}/*.{test,spec}.ts']
include: ['test/{e2e,unit}/*.{test,spec}.ts']
See: Unit Testing How to fix your config:
import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'

export default defineConfig({
test: {
projects: [
{
test: {
name: 'unit',
include: ['test/{e2e,unit}/*.{test,spec}.ts'],
environment: 'node',
},
},
await defineVitestProject({
test: {
environment: 'nuxt',
include: ['test/nuxt/*.{test,spec}.ts'], // or .js if you use JS
globals: true,
globalSetup: 'test/nuxt/test-globals.ts',
setupFiles: ['test/nuxt/setup.ts'],
},
}),
],
},
})
import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'

export default defineConfig({
test: {
projects: [
{
test: {
name: 'unit',
include: ['test/{e2e,unit}/*.{test,spec}.ts'],
environment: 'node',
},
},
await defineVitestProject({
test: {
environment: 'nuxt',
include: ['test/nuxt/*.{test,spec}.ts'], // or .js if you use JS
globals: true,
globalSetup: 'test/nuxt/test-globals.ts',
setupFiles: ['test/nuxt/setup.ts'],
},
}),
],
},
})
Summary:
Update your include patterns to match your actual test file extensions and use the correct glob pattern. This should resolve the "No test files found" error as described in the Nuxt documentation Unit Testing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai import { defineConfig } from 'vitest/config' import { defineVitestProject } from '@nuxt/test-utils/config' export default defineConfig({ test: { projects: [ // { // test: { // name: 'unit', // include: ['test/{e2e,unit}/.{test,spec}.ts'], // environment: 'node', // }, // }, await defineVitestProject({ test: { environment: 'nuxt', include: ['test/nuxt/*.{test,spec}.{js,ts}'], globals: true, globalSetup: 'test/nuxt/test-globals.ts', setupFiles: ['test/nuxt/setup.ts'], }, }), ], }, }) in test i have only nuxt folder, without e2e ant unit
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Your configuration is almost correct for a project that only has a test/nuxt/ folder and no e2e or unit folders. According to the Nuxt 4 documentation, your include pattern should match the test files you have in test/nuxt/. The pattern you are using:
include: ['test/nuxt/*.{test,spec}.{js,ts}'],
include: ['test/nuxt/*.{test,spec}.{js,ts}'],
will match files like test/nuxt/example.test.js, test/nuxt/example.spec.ts, etc., which is correct if your test files follow this naming convention. Key points from the knowledge sources: - The recommended structure is to separate tests into unit, nuxt, and e2e folders, but it is not required. You can have only a nuxt folder if you only need Nuxt runtime environment tests Unit Testing. - The include pattern should match your actual test file names and extensions. The pattern you use is valid for both .js and .ts files with .test or .spec in their names. - You do not need to define the unit or e2e projects if you do not have those folders or tests. Summary:
Your configuration is correct for a project with only a test/nuxt/ folder. Just ensure your test files are named like *.test.js, *.spec.ts, etc., and are located in test/nuxt/. If you follow this, Vitest with Nuxt will discover and run your tests as expected Unit Testing. If you still encounter issues, double-check your file naming and paths, as the test runner will only find files that match the include pattern. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai still have error DEV v3.2.4 /usr/src/app No test files found. You can change the file name pattern by pressing "p" 0
include: test/nuxt/.{test,spec}.{js,ts} exclude: /node_modules/, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, if you are still seeing the error:
No test files found. You can change the file name pattern by pressing "p"

include: test/nuxt/*.{test,spec}.{js,ts}
No test files found. You can change the file name pattern by pressing "p"

include: test/nuxt/*.{test,spec}.{js,ts}
Possible causes according to the Nuxt documentation: 1. File Naming or Location:
The include pattern test/nuxt/*.{test,spec}.{js,ts} will only match files directly inside test/nuxt/ named like something.test.js, something.spec.ts, etc.
- If your test files are in subfolders (e.g., test/nuxt/components/example.test.ts), they will not be matched.
- If your test files do not have .test.js, .spec.ts, etc., in their names, they will not be matched. 2. Pattern Should Match Your Structure:
If your tests are in subfolders, update your pattern to:
include: ['test/nuxt/**/*.{test,spec}.{js,ts}']

include: ['test/nuxt/**/*.{test,spec}.{js,ts}']

This will match test files in all subdirectories, as shown in the Nuxt docs for organizing tests Unit Testing. 3. File Extensions:
Make sure your test files have the correct extensions (.js or .ts) and naming (.test or .spec). Example: If your test file is at test/nuxt/components/exportMenu.test.ts, your config should be:
include: ['test/nuxt/**/*.{test,spec}.{js,ts}']
include: ['test/nuxt/**/*.{test,spec}.{js,ts}']
Summary:
The most likely reason for "No test files found" is that your include pattern does not match the actual location or naming of your test files. Adjust the pattern as above to match files in subfolders if needed. This is directly supported by the Nuxt documentation Unit Testing. If you have confirmed your files match the pattern and are still having issues, the knowledge sources do not provide further troubleshooting steps for this specific scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai No test files found. You can change the file name pattern by pressing "p" 0
include: test/nuxt//*.{test,spec}.{js,ts} exclude: /node_modules/, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, /{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.* ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Error: Cannot find module '/@fs//usr/src/app/app/test/nuxt/test-globals.ts' ❯ ViteNodeRunner._fetchModule node_modules/vite-node/dist/client.mjs:247:19 ❯ ViteNodeRunner.directRequest node_modules/vite-node/dist/client.mjs:268:44 ❯ ViteNodeRunner.cachedRequest node_modules/vite-node/dist/client.mjs:189:11 ❯ ViteNodeRunner.executeFile node_modules/vite-node/dist/client.mjs:162:10 ❯ loadGlobalSetupFile node_modules/vitest/dist/chunks/cli-api.BkDphVBG.js:5798:12 ❯ TestProject._initializeGlobalSetup node_modules/vitest/dist/chunks/cli-api.BkDphVBG.js:7072:24 ❯ Vitest.initializeGlobalSetup node_modules/vitest/dist/chunks/cli-api.BkDphVBG.js:9724:35 ❯ node_modules/vitest/dist/chunks/cli-api.BkDphVBG.js:9636:5 ❯ Vitest.runFiles node_modules/vitest/dist/chunks/cli-api.BkDphVBG.js:9666:10 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Serialized Error: { code: 'ERR_MODULE_NOT_FOUND' } Caused by: Error: Failed to load url /usr/src/app/app/test/nuxt/test-globals.ts (resolved id: /usr/src/app/app/test/nuxt/test-globals.ts). Does the file exist? ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-Bj7gA1-0.js:26300:33 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Serialized Error: { code: 'ERR_LOAD_URL' }
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Your error message indicates two main issues: 1. No test files found
The pattern you are using, test/nuxt/**/*.{test,spec}.{js,ts}, is correct for matching files like test/nuxt/someTest.test.ts or test/nuxt/dir/anotherTest.spec.js. If you still see "No test files found," it means there are no files matching this pattern in your project.
- Double-check that your test files are named with .test.js, .spec.ts, etc., and are located somewhere under test/nuxt/. 2. Cannot find module '/usr/src/app/app/test/nuxt/test-globals.ts'
The error shows that Vitest is looking for test/nuxt/test-globals.ts inside /usr/src/app/app/, not /usr/src/app/. This suggests your project root is /usr/src/app, but something (likely Nuxt's new directory structure) is causing the test runner to look inside an extra app/ directory. According to the Nuxt 4 documentation, the ~ alias now points to the app/ directory, but your test files and setup files should be referenced relative to the project root, not using the ~ alias in the config. If your test/nuxt/test-globals.ts file is at /usr/src/app/test/nuxt/test-globals.ts, make sure your config references it as 'test/nuxt/test-globals.ts'. If you see /usr/src/app/app/test/nuxt/test-globals.ts in the error, but your file is actually at /usr/src/app/test/nuxt/test-globals.ts, this means the path is being resolved incorrectly. --- What to do - Check your test file locations and names:
Ensure you have files like test/nuxt/example.test.ts or test/nuxt/example.spec.js. - Check your global setup and setupFiles paths:
Make sure these files exist at the specified locations and are referenced with the correct relative path (not using ~). - If your project root is /usr/src/app, your test files should be at /usr/src/app/test/nuxt/, and your config should reference them as 'test/nuxt/test-globals.ts' and 'test/nuxt/setup.ts'. --- If you have confirmed all of the above and the error persists, the knowledge sources do not provide further troubleshooting steps for this specific scenario. The most likely cause, according to the documentation, is a mismatch between the expected and actual file locations or naming, or incorrect path references in your config Unit Testing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai import { defineConfig } from 'vitest/config' import { defineVitestProject } from '@nuxt/test-utils/config' export default defineConfig({ test: { projects: [ await defineVitestProject({ test: { environment: 'nuxt', include: ['test/nuxt//*.{test,spec}.{js,ts}'], globals: true, globalSetup: 'test/nuxt/test-globals.ts', setupFiles: ['test/nuxt/setup.ts'], }, }), ], }, }) No test files found. You can change the file name pattern by pressing "p" include: test/nuxt//.{test,spec}.{js,ts} exclude: /node_modules/, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config. file:///usr/src/app/node_modules/vite-node/dist/client.mjs:247 const error = new Error(Cannot find ${isBareImport(id) ? "package" : "module"} '${id}'${importer ? imported from '${importer}' : ""}, { cause }); ^ Error: Cannot find module '/@fs//usr/src/app/app/test/nuxt/test-globals.ts' at ViteNodeRunner._fetchModule (file:///usr/src/app/node_modules/vite-node/dist/client.mjs:247:19) } test in root/test/nuxt components in root/app/components
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, your configuration and file structure should work if: - Your test files are in root/test/nuxt/ and named like something.test.ts or something.spec.js. - Your globalSetup and setupFiles are referenced as 'test/nuxt/test-globals.ts' and 'test/nuxt/setup.ts' and these files exist at those paths. However, your error message shows:
Error: Cannot find module '/@fs//usr/src/app/app/test/nuxt/test-globals.ts'
Error: Cannot find module '/@fs//usr/src/app/app/test/nuxt/test-globals.ts'
This means Vitest is looking for test/nuxt/test-globals.ts inside an extra app/ directory (/usr/src/app/app/test/nuxt/test-globals.ts), but your actual file is at /usr/src/app/test/nuxt/test-globals.ts. What the knowledge sources indicate - In Nuxt 4, the ~ alias points to the app/ directory, but for test setup files in your config, you should use a path relative to the project root, not using the ~ alias Unit Testing. - There is no mention in the knowledge sources of Nuxt or Vitest automatically prepending app/ to the path for setup files. This suggests a possible misconfiguration or an environment issue. What to check 1. Check your working directory:
Make sure you are running Vitest from the project root (/usr/src/app), not from inside the app/ directory. 2. Check your config file location:
Your vitest.config.ts should be in the project root, not inside app/. 3. Check for duplicate app/ directories:
Ensure you do not have an app/ directory inside another app/ directory by mistake. 4. Check your import paths:
Your config should use:
globalSetup: 'test/nuxt/test-globals.ts',
setupFiles: ['test/nuxt/setup.ts'],

globalSetup: 'test/nuxt/test-globals.ts',
setupFiles: ['test/nuxt/setup.ts'],

and these files must exist at those exact locations. 5. Check your test file names and locations:
Your pattern test/nuxt/**/*.{test,spec}.{js,ts} will only match files like test/nuxt/foo.test.ts or test/nuxt/bar/baz.spec.js. If your files do not match this pattern, they will not be found Unit Testing. If the problem persists The knowledge sources do not provide further troubleshooting steps for this specific scenario. The most likely cause, according to the documentation, is a mismatch between the expected and actual file locations or naming, or incorrect path references in your config. If you have confirmed all of the above and the error persists, you may need to review your project structure and ensure there are no path or directory issues as described above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai OK.Another case I updated project to version nuxt 4+. And I didn't changed anything, only updated, while i run test I have got DEV v3.2.4 /usr/src/app/app No test files found. You can change the file name pattern by pressing "p" include: /*.{test,spec}.?(c|m)[jt]s?(x) exclude: /node_modules/, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, /{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.* Error: Cannot find module '/@fs//usr/src/app/app/test
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, after upgrading to Nuxt 4+, the default directory structure and how paths are resolved have changed significantly. In Nuxt 4, the srcDir now defaults to app/, and the ~ alias points to this app/ directory, not the project root. This can affect how your test runner locates files and resolves paths New Directory Structure. Key points from the knowledge sources: - If you did not change your folder structure after upgrading, Nuxt may now be running with app/ as the root for source files, and your test runner may be running from /usr/src/app/app instead of /usr/src/app. - The error message and the fact that your working directory is /usr/src/app/app suggest that Nuxt is treating app/ as the root, which may cause test files outside app/ (such as test/) not to be found. - The test runner’s include pattern is looking for test files relative to the current working directory. If your tests are in /usr/src/app/test/, but the runner is in /usr/src/app/app, it will not find them. What the documentation recommends: - After upgrading, you should move your source folders (components/, pages/, etc.) into app/, but keep your test/ folder at the project root, not inside app/. - If you want to keep your old structure, you can set srcDir: '.' in your nuxt.config.ts to revert to the previous behavior New Directory Structure. How to resolve: 1. Check your working directory:
Make sure you are running your test commands from the project root, not from inside app/. 2. Check your srcDir setting:
If you want to keep your old structure, add this to your nuxt.config.ts:
export default defineNuxtConfig({
srcDir: '.',
})

export default defineNuxtConfig({
srcDir: '.',
})

This will revert the srcDir to the project root, so your test runner will look for files in the correct place. 3. Check your test file locations:
Ensure your test files are in the correct location and match the include pattern. If you follow these steps, your test runner should be able to find your test files after upgrading to Nuxt 4 New Directory Structure. If you still encounter issues, the knowledge sources do not provide further troubleshooting steps for this specific scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.aishould be in vitest config the same settings?
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- If you want to keep your old project structure after upgrading to Nuxt 4, you should set srcDir: '.' in your nuxt.config.ts to revert the source directory to the project root. This ensures that Nuxt and related tooling (including Vitest) resolve paths as they did before the upgrade New Directory Structure. Regarding your Vitest config:
The knowledge sources do not explicitly state that you must change your Vitest config if you set srcDir: '.', but it is implied that your include patterns and any referenced paths in your Vitest config should match your actual file locations. If your test files remain in the same place and your include patterns are correct, you do not need to change your Vitest config solely because you set srcDir: '.'. Summary:
- Set srcDir: '.' in your nuxt.config.ts if you want to keep the old structure. - Your Vitest config should match your actual test file locations and naming patterns. - No other specific changes to the Vitest config are required according to the knowledge sources, as long as your paths and patterns are correct. If you encounter issues, double-check that your test file locations and patterns in the Vitest config align with your project structure after setting srcDir New Directory Structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
eleonorazhyrlitsyna
@kapa.ai rendering components in test fails
kapa.ai
kapa.ai5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- If rendering components in your tests fails after upgrading to Nuxt 4, the most common causes—according to the knowledge sources—are related to the test environment and how components are imported and mounted. Key points to check: 1. Test Environment:
You must use the Nuxt test environment for tests that rely on Nuxt features (such as auto-imported components, composables, or context). This is done by using @nuxt/test-utils and configuring your vitest.config.ts to use the Nuxt environment for relevant test files. For example:
import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'

export default defineConfig({
test: {
projects: [
await defineVitestProject({
test: {
environment: 'nuxt',
include: ['test/nuxt/*.{test,spec}.ts'],
},
}),
],
},
})

import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'

export default defineConfig({
test: {
projects: [
await defineVitestProject({
test: {
environment: 'nuxt',
include: ['test/nuxt/*.{test,spec}.ts'],
},
}),
],
},
})

Unit Testing 2. Mounting Components:
Use the helpers provided by @nuxt/test-utils, such as mountSuspended or renderSuspended, to mount components within the Nuxt environment. For example:
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'

it('can mount some component', async () => {
const component = await mountSuspended(SomeComponent)
expect(component.text()).toMatchInlineSnapshot(
'"This is an auto-imported component"'
)
})

import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'

it('can mount some component', async () => {
const component = await mountSuspended(SomeComponent)
expect(component.text()).toMatchInlineSnapshot(
'"This is an auto-imported component"'
)
})

Helpers 3. Component Imports:
If you are using auto-imported components, import them from #components in your tests. If you import directly from a path, ensure the path matches the new Nuxt 4 directory structure (e.g., ~/components/ComponentName.vue now resolves to app/components/ComponentName.vue). 4. File Location and Naming:
Ensure your test files are in the correct directory and match the include pattern in your Vitest config. If you are not using the Nuxt test environment:
If you use plain @vue/test-utils without the Nuxt environment, you can only test components that do not rely on Nuxt features (no auto-imports, no composables, etc.) Using @vue/test-utils. --- Summary:
Rendering components in tests will fail if you do not use the Nuxt test environment for components that depend on Nuxt features. Use @nuxt/test-utils and the provided helpers, and ensure your test configuration matches the new Nuxt 4 structure and conventions. If you follow these steps and still encounter issues, the knowledge sources do not provide further troubleshooting steps for this specific scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5d ago
<@1030782796999970858> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?