\n\u003C!-- OR -->\n\u003CIcon name=\"my-icon:a\" v-if=\"flag\" />\n\u003CIcon name=\"my-icon:b\" v-else />\n```\nin `nuxt.config.ts`\n```ts\nicon: {\n provider: 'server',\n customCollections: [\n {\n prefix: 'my-icon',\n dir: './assets/icon/svg',\n },\n ],\n},\n// ...\nnitro: {\n preset: 'static',\n},\n```\n\nIf toggle value of `flag`, \neverything works well in development, \nbut it throws 404 error for `my-icon:b` after building and generating.\n(it works well with `v-show`) \n\nProject info:\n```\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.8.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@9.9.0\n- Builder: -\n- User Config: modules, icon, colorMode, shadcn, fonts, googleSignIn, app, imports, css, vite, nitro, compatibilityDate, telemetry\n- Runtime Modules: @nuxtjs/tailwindcss@6.13.2, @nuxt/icon@1.11.0, @nuxt/fonts@0.11.0, @nuxt/image@1.9.0, @nuxt/eslint@1.2.0, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/test-utils/module@3.17.2, @nuxtjs/color-mode@3.5.2, shadcn-nuxt@1.0.3, @vueuse/nuxt@13.0.0, nuxt-vue3-google-signin@0.0.11\n- Build Modules: -\n------------------------------\n```\n",[],380,"nuxt","icon","open","Local icon 404 after `nuxi generating` if with `:name=\"flag?'my-icon:icon-a':'my-icon:icon-b'\"`","2025-03-26T15:31:52Z","https://github.com/nuxt/icon/issues/380",0.4459352,{"description":1993,"labels":1994,"number":1998,"owner":1985,"repository":1999,"state":1987,"title":2000,"updated_at":2001,"url":2002,"score":2003},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/test-utils/module@3.11.0\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-3etpwp?file=package.json\r\n\r\n### Describe the bug\r\n\r\nIf you have test files in your `pages` folder importing `@nuxt/test-utils/runtime`, the following error pops up when starting the project\r\n\r\n``` \r\nERROR This module cannot be imported in the Vue part of your app. [importing @nuxt/test-utils/runtime from pages/\u003Ctestname>.ts]\r\n```\r\n\r\nThe error does not seem to have effect on the app startup itself (it's probably more a warning).\r\n\r\nThe error goes away when moving the test out of the `pages` folder.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[1995],{"name":1996,"color":1997},"bug","d73a4a",747,"test-utils","Error: This module cannot be imported in the Vue part of your app","2025-04-09T01:04:25Z","https://github.com/nuxt/test-utils/issues/747",0.6595654,{"description":2005,"labels":2006,"number":2007,"owner":1985,"repository":1999,"state":2008,"title":2009,"updated_at":2010,"url":2011,"score":1991},"Example in https://test-utils.nuxtjs.org/api-reference/app-testing not working. \r\nAfter run test get error:\r\n\r\n```\r\n/firsttest.spec.js:1\r\n({\"Object.\u003Canonymous>\":function(module,exports,require,__dirname,__filename,global,jest){import { get, setupTest } from '@nuxt/test-utils';\r\n\r\nSyntaxError: Cannot use import statement outside a module\r\n```\r\nmy setup:\r\n\r\nin jest.config.js\r\n```\r\nmodule.exports = {\r\n clearMocks: true,\r\n testMatch: [\r\n '*/__tests__/**/*.[jt]s?(x)',\r\n '**/?(*.)+(spec|test).[tj]s?(x)',\r\n '**/test/(*.)+(spec|test).js'],\r\n moduleNameMapper: {\r\n '^@/(.*)$': '\u003CrootDir>/$1',\r\n '^~/(.*)$': '\u003CrootDir>/$1',\r\n },\r\n moduleFileExtensions: ['js', 'vue', 'json'],\r\n testEnvironment: 'jsdom',\r\n transform: {\r\n '^.+\\\\.js$': 'babel-jest',\r\n '.*\\\\.(vue)$': 'vue-jest',\r\n },\r\n preset: '@nuxt/test-utils',\r\n}\r\n```\r\nin package.json\r\n```\r\n{\r\n \"name\": \"\",\r\n \"version\": \"1.0.0\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"node_modules/.bin/jest\"\r\n },\r\n \"author\": \"\",\r\n \"license\": \"\",\r\n \"dependencies\": {\r\n \"bootstrap\": \"^4.5.3\",\r\n \"bootstrap-vue\": \"^2.20.1\",\r\n \"nuxt\": \"^2.15.2\",\r\n\r\n },\r\n \"devDependencies\": {\r\n \"@babel/plugin-transform-modules-commonjs\": \"^7.12.1\",\r\n \"@nuxt/test-utils\": \"^0.2.0\",\r\n \"@vue/test-utils\": \"^1.1.1\",\r\n \"babel-jest\": \"^26.6.3\",\r\n \"jest\": \"^26.6.3\",\r\n \"vue-jest\": \"^3.0.7\"\r\n }\r\n}\r\n\r\n```\r\n\r\n\r\n",[],267,"closed","Example in https://test-utils.nuxtjs.org/api-reference/app-testing not working","2023-12-02T00:28:12Z","https://github.com/nuxt/test-utils/issues/267",{"description":2005,"labels":2013,"number":2014,"owner":1985,"repository":1999,"state":2008,"title":2009,"updated_at":2015,"url":2016,"score":1991},[],481,"2023-12-02T00:13:13Z","https://github.com/nuxt/test-utils/issues/481",{"description":2018,"labels":2019,"number":2023,"owner":1985,"repository":1999,"state":2008,"title":2024,"updated_at":2025,"url":2026,"score":2027},"When I tried to use the library I got this error: \r\n\r\n\r\nIf I only use jest or testing library they do work, I am quite confused. Any ideas?\r\n\r\nThis is my jest.config.js:\r\n```\r\nmodule.exports = {\r\n moduleNameMapper: {\r\n '^@/(.*)$': '\u003CrootDir>/$1',\r\n '^~/(.*)$': '\u003CrootDir>/$1',\r\n '^@atoms/(.*)$': '\u003CrootDir>/components/common/atoms/$1',\r\n '^@molecules/(.*)$': '\u003CrootDir>/components/common/molecules/$1',\r\n '^@organisms/(.*)$': '\u003CrootDir>/components/common/organisms/$1',\r\n '^@checkout/(.*)$': '\u003CrootDir>/components/private/checkout/$1',\r\n '^vue$': 'vue/dist/vue.common.js'\r\n },\r\n moduleFileExtensions: ['js', 'vue', 'json'],\r\n transform: {\r\n '^.+\\\\.js$': 'babel-jest',\r\n '.*\\\\.(vue)$': 'vue-jest'\r\n },\r\n collectCoverage: true,\r\n transformIgnorePatterns: [\r\n 'node_modules/(?!(nuxt-i18n)/)',\r\n 'node_modules/(?!(nuxt-webfontloader)/)',\r\n 'node_modules/(?!(nuxt-test-utils)/)'\r\n ],\r\n testEnvironment: 'jsdom',\r\n preset: '@nuxt/test-utils'\r\n}\r\n\r\n\r\n```\r\nThis is my package.json:\r\n```\r\n \"dependencies\": {\r\n \"@adyen/adyen-web\": \"^4.2.3\",\r\n \"@bugsnag/js\": \"^7.1.1\",\r\n \"@bugsnag/plugin-vue\": \"^7.1.1\",\r\n \"@nuxtjs/axios\": \"^5.3.6\",\r\n \"@nuxtjs/dayjs\": \"^1.3.0\",\r\n \"@nuxtjs/gtm\": \"^2.3.2\",\r\n \"@nuxtjs/pwa\": \"^3.3.5\",\r\n \"@nuxtjs/router\": \"^1.5.0\",\r\n \"@nuxtjs/svg-sprite\": \"^0.4.10\",\r\n \"@tailwindcss/aspect-ratio\": \"^0.2.0\",\r\n \"@tailwindcss/forms\": \"^0.3.2\",\r\n \"@tailwindcss/typography\": \"^0.4.0\",\r\n \"cookie-universal-nuxt\": \"^2.1.4\",\r\n \"core-js\": \"^2.6.0\",\r\n \"cross-env\": \"^5.2.0\",\r\n \"dotenv\": \"^8.2.0\",\r\n \"eslint-loader\": \"^4.0.2\",\r\n \"express\": \"^4.16.4\",\r\n \"jsdom\": \"^16.4.0\",\r\n \"lozad\": \"^1.15.0\",\r\n \"node-fetch\": \"^2.6.1\",\r\n \"nuxt\": \"2.15.4\",\r\n \"nuxt-feature-toggle\": \"^1.0.1\",\r\n \"nuxt-font-loader-strategy\": \"^1.1.1\",\r\n \"nuxt-i18n\": \"^6.15.4\",\r\n \"nuxt-jsonld\": \"^1.4.10\",\r\n \"nuxt-webfontloader\": \"^1.1.0\",\r\n \"v-click-outside\": \"^3.0.1\",\r\n \"v-clipboard\": \"^2.2.3\",\r\n \"vue-debounce\": \"^2.5.6\",\r\n \"vue-glide-js\": \"^1.3.14\",\r\n \"vue-gtm\": \"^2.3.1\",\r\n \"vue-slider-component\": \"^3.1.4\",\r\n \"vue-social-sharing\": \"^3.0.0-beta.11\",\r\n \"vue-toastification\": \"^1.7.6\",\r\n \"vue-vimeo-player\": \"^0.1.0\",\r\n \"vuelidate\": \"^0.7.5\"\r\n },\r\n \"devDependencies\": {\r\n \"@babel/core\": \"^7.7.7\",\r\n \"@babel/preset-env\": \"^7.15.0\",\r\n \"@babel/plugin-transform-runtime\": \"^7.15.0\",\r\n \"@nuxt/test-utils\": \"^0.2.2\",\r\n \"@nuxtjs/eslint-config\": \"^5.0.0\",\r\n \"@nuxtjs/eslint-module\": \"^3.0.1\",\r\n \"@nuxtjs/tailwindcss\": \"^4.1.2\",\r\n \"@testing-library/vue\": \"^5.8.2\",\r\n \"@vue/test-utils\": \"^1.1.2\",\r\n \"babel-eslint\": \"^10.0.1\",\r\n \"babel-jest\": \"26\",\r\n \"eslint\": \"^7.14.0\",\r\n \"eslint-config-prettier\": \"^6.15.0\",\r\n \"eslint-plugin-nuxt\": \"^2.0.0\",\r\n \"eslint-plugin-prettier\": \"^3.1.4\",\r\n \"jest\": \"26\",\r\n \"node-sass\": \"^4.14.1\",\r\n \"nodemon\": \"^1.18.9\",\r\n \"playwright\": \"^1.14.1\",\r\n \"postcss\": \"^8.2.9\",\r\n \"prettier\": \"^1.19.1\",\r\n \"sass-loader\": \"10.1.1\",\r\n \"vue-jest\": \"^4.0.0-rc.1\"\r\n }\r\n}\r\n```\r\n\r\n\r\nMy .babelrc: \r\n```\r\n{\r\n \"env\": {\r\n \"test\": {\r\n \"presets\": [\r\n [\r\n \"@babel/preset-env\",\r\n {\r\n \"targets\": {\r\n \"node\": \"current\"\r\n }\r\n }\r\n ]\r\n ]\r\n }\r\n }\r\n}\r\n```\r\n\r\n\r\nI am trying to use this test: \r\n\r\n`import { createPage, setupTest } from '@nuxt/test-utils'`\r\n\r\n`describe('browser', () => {`\r\n `setupTest({ browser: true })`\r\n\r\n ` it('renders the index page', async () => {`\r\n ` const page = await createPage('/')`\r\n ` const html = await page.innerHTML('body')`\r\n\r\n ` expect(html).toContain('Something')`\r\n` })`\r\n`})`\r\n\r\n",[2020],{"name":2021,"color":2022},"v0","4137F6",320,"\"Cannot use import statement outside a module\" when i use setupTest","2024-05-23T20:19:27Z","https://github.com/nuxt/test-utils/issues/320",0.55885273,{"description":2029,"labels":2030,"number":2034,"owner":1985,"repository":1999,"state":2008,"title":2035,"updated_at":2036,"url":2037,"score":2038},"Hey guys, today I upgraded `vitest` and `nuxt-vitest` to version [0.29.2](https://github.com/vitest-dev/vitest/releases/tag/v0.29.2) and [0.6.8](https://github.com/danielroe/nuxt-vitest/releases/tag/0.6.8), respectively.\r\n\r\nI upgraded `nuxt-vitest` because I upgraded `vitest` and installed `c8` for test coverage and I started getting the following error message on test runs:\r\n```\r\nError: Cannot find module 'vitest-environment-nuxt/module'\r\n```\r\n\r\nAnd after the `nuxt-vitest` upgrade, I started getting the following error:\r\n```\r\nError: Cannot find import \"useI18n\" to mock\r\n```\r\n\r\nAnd this happens when I try to mock `useI18n` (from `@nuxtjs/i18n`), which exists globally in my application:\r\n```javascript\r\nimport { mockNuxtImport } from 'nuxt-vitest/utils'\r\n\r\nmockNuxtImport('useI18n', () => {\r\n return () => {\r\n return {\r\n t: vi.fn()\r\n }\r\n }\r\n})\r\n```\r\n\r\nBefore all these upgrades, the mock was working properly.\r\nAnyone else with a similar problem?\r\n\r\n*EXTRA INFORMATION*\r\nOn the other hand...\r\nMy original approach to mock i18n started to work (didn't work before):\r\n```javascript\r\nimport { useI18n } from 'vue-i18n'\r\nimport { vi } from 'vitest'\r\n\r\nvi.mock('vue-i18n')\r\n\r\nuseI18n.mockReturnValue({\r\n t: (tKey) => tKey\r\n})\r\n```\r\nAnd I using this approach for now. And why it didn't work before is a mystery...",[2031],{"name":2032,"color":2033},"vitest-environment","b60205",508,"`mockNuxtImport` failing to mock Nuxt auto imports","2023-12-02T00:22:09Z","https://github.com/nuxt/test-utils/issues/508",0.6371314,{"description":2040,"labels":2041,"number":2043,"owner":1985,"repository":1999,"state":2008,"title":2044,"updated_at":2045,"url":2046,"score":2047},"Try running `yarn test` in https://codesandbox.io/s/optimistic-maxwell-l1dmx?file=/tests/test.spec.js",[2042],{"name":2021,"color":2022},283,"\"Cannot use import statement outside a module\" while using with nuxt-i18n","2024-05-01T16:05:10Z","https://github.com/nuxt/test-utils/issues/283",0.64357454,{"description":2049,"labels":2050,"number":2052,"owner":1985,"repository":1999,"state":2008,"title":2053,"updated_at":2054,"url":2055,"score":2056},"I have a nuxt project here using typescript in components placed in .vue files\r\n\r\nGiven this test for a component\r\n\r\n```typescript\r\n\r\nimport { mount } from '@nuxt/test-utils'\r\nimport LoginForm from '@/components/auth/LoginForm'\r\ndescribe('LoginForm', () => {\r\n test('is a Vue instance', () => {\r\n const wrapper = mount(LoginForm)\r\n expect(wrapper.vm).toBeTruthy()\r\n })\r\n})\r\n\r\n```\r\n\r\nthis component makes the test pass: \r\n\r\n```vue\r\n\u003Ctemplate>\r\n\r\n\u003C/template>\r\n\u003Cscript>\r\n\r\n\u003C/script>\r\n```\r\n\r\nand this component breaks it \r\n\r\n```vue\r\n\u003Ctemplate>\r\n\r\n\u003C/template>\r\n\u003Cscript lang=\"ts\">\r\n\r\n\u003C/script>\r\n```\r\n\r\nwith a error: \r\n\r\n```\r\nTest suite failed to run\r\n\r\n Jest encountered an unexpected token\r\n\r\n Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\r\n\r\n Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\r\n\r\n By default \"node_modules\" folder is ignored by transformers.\r\n\r\n Here's what you can do:\r\n • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\r\n • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript\r\n • To have some of your \"node_modules\" files transformed, you can specify a custom \"transformIgnorePatterns\" in your config.\r\n • If you need a custom transformation specify a \"transform\" option in your config.\r\n • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the \"moduleNameMapper\" config option.\r\n\r\n You'll find more details and examples of these config options in the docs:\r\n https://jestjs.io/docs/configuration\r\n For information about custom transformations, see:\r\n https://jestjs.io/docs/code-transformation\r\n\r\n```\r\n\r\nAny hint of how to get typescript components to run in tests?\r\n\r\n\r\nnode: 17.0.1\r\n \"nuxt\": \"2.15.8\",\r\n \"@nuxt/test-utils\": \"^0.2.2\",",[2051],{"name":2021,"color":2022},293,"tests break for a component using typescript","2024-05-01T16:05:03Z","https://github.com/nuxt/test-utils/issues/293",0.64515495,{"description":2058,"labels":2059,"number":2060,"owner":1985,"repository":1999,"state":2008,"title":2061,"updated_at":2062,"url":2063,"score":2064},"Trying to get the test-utils to work, but after adding the preset, JEST simply won't run, saying that the test utils cannot be found.\r\n\r\nThis is straight from the docs. I've tried a bunch of different versions, and simply cannot get them to work. This is required (I think) in order to get the global function calls (such as definePageMeta) to work in tests.\r\n\r\n> ● Validation Error:\r\n>\r\n> Preset @nuxt/test-utils not found.\r\n>\r\n> Configuration Documentation:\r\n> https://jestjs.io/docs/configuration.html\r\n\r\nThe test utils are installed.\r\n\r\nAny ideas?",[],280,"Preset @nuxt/test-utils not found.","2023-12-02T00:18:11Z","https://github.com/nuxt/test-utils/issues/280",0.65187615,{"description":2066,"labels":2067,"number":2074,"owner":1985,"repository":1985,"state":2008,"title":2075,"updated_at":2076,"url":2077,"score":2078},"### Version\n\n[v2.3.4](https://github.com/nuxt.js/releases/tag/v2.3.4)\n\n### Reproduction link\n\n[https://nuxtjs.org/](https://nuxtjs.org/)\n\n### Steps to reproduce\n\nRun: `yarn create nuxt-app project`\nChoose Linter and JestJs and SPA mode.\n\nWithout adding any additional content, run `yarn test`\n\n### What is expected ?\n\nI expect the default test to pass.\n\n### What is actually happening?\n\nI receive this error message:\n\n```\nyarn run v1.13.0\n$ jest\n FAIL test/Logo.spec.js\n ● Test suite failed to run\n\n Jest encountered an unexpected token\n\n This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.\n\n By default, if Jest sees a Babel config, it will use that to transform your files, ignoring \"node_modules\".\n\n Here's what you can do:\n • To have some of your \"node_modules\" files transformed, you can specify a custom \"transformIgnorePatterns\" in your config.\n • If you need a custom transformation specify a \"transform\" option in your config.\n • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the \"moduleNameMapper\" config option.\n\n You'll find more details and examples of these config options in the docs:\n https://jestjs.io/docs/en/configuration.html\n\n Details:\n\n /home/begueradj/Development/project/test/Logo.spec.js:1\n ({\"Object.\u003Canonymous>\":function(module,exports,require,__dirname,__filename,global,jest){import { mount } from '@vue/test-utils';\n ^\n\n SyntaxError: Unexpected token {\n\n at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)\n\nTest Suites: 1 failed, 1 total\nTests: 0 total\nSnapshots: 0 total\nTime: 0.803s\nRan all test suites.\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n```\n\n### Note\nThis occurs **only** when I move the content of project to an other folder where of course I remove `node_modes` and `.nuxt` folders.\n\nI **need** to copy the content of the generate folder to an other place because I am working with Git branches\n\n\n\n\u003C!--cmty-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8573\">#c8573\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2068,2071],{"name":2069,"color":2070},"pending triage","E99695",{"name":2072,"color":2073},"2.x","d4c5f9",4899,"Default test does not pass","2023-01-22T15:30:09Z","https://github.com/nuxt/nuxt/issues/4899",0.65548545,["Reactive",2080],{},["Set"],["ShallowReactive",2083],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"0lx_KKlkeJLgOGs6TqFPO_ZKtjQ-tSQvJO8bXlupebI":-1},"/nuxt/test-utils/380"]