\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.6546693,{"description":2876,"labels":2877,"number":2884,"owner":2868,"repository":2868,"state":2885,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### 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>",[2878,2881],{"name":2879,"color":2880},"pending triage","E99695",{"name":2882,"color":2883},"2.x","d4c5f9",4899,"closed","Default test does not pass","2023-01-22T15:30:09Z","https://github.com/nuxt/nuxt/issues/4899",0.64023817,{"description":2891,"labels":2892,"number":2899,"owner":2868,"repository":2868,"state":2885,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Environment\r\n\r\nnuxt latest\r\nnode 22\r\nhappy-dom\r\njest\r\n\r\n### Reproduction\r\n\r\nHard to reproduce something that isn't there but I can at least show you what I am trying to do, the error I get for context.\r\n\r\n```js\r\nimport { expect, test } from \"vitest\";\r\nimport { mountSuspended } from \"@nuxt/test-utils/runtime\";\r\nimport ToDo from \"~/components/ToDo.vue\";\r\n\r\nit('can mount todo component', async () => {\r\n const todo = await mountSuspended(ToDo, {\r\n data() {\r\n return {\r\n completed: true,\r\n title: \"Clean Walrus\"\r\n }\r\n }\r\n })\r\n expect(todo.html()).toEqual(\"\u003C>\u003C/>\")\r\n})\r\n```\r\n\r\n```bash\r\nTypeError: Cannot read properties of undefined (reading 'completed')\r\n ❯ Proxy._sfc_render components/ToDo.vue:2:28\r\n 1| \u003Ctemplate>\r\n 2| \u003Cdiv :class=\"`task ${task.completed ? 'is-complete' : ''}`\">\r\n | ^\r\n 3| \u003Cdiv class=\"content\">{{ task.title }}\u003C/div>\r\n 4| \u003Cdiv class=\"buttons\">\r\n ❯ Proxy.clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:142:37\r\n ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:16\r\n ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4921:46\r\n ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:181:19\r\n ❯ instance.update node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5052:16\r\n ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5062:5\r\n ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4830:7\r\n ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4784:9\r\n ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4313:11\r\n\r\nThis error originated in \"tests/components/ToDo.vue.test.js\" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.\r\nThe latest test that might've caused the error is \"can mount todo component\". It might mean one of the following:\r\n- The error was thrown, while Vitest was running this test.\r\n- If the error occurred after the test had been completed, this was the last documented test before it was thrown.\r\n```\r\nI have tried various things along this line of thought from various scraps of information I can find on blogs and stack overflow but at least 50% of it is for nuxt2 and out of date.\r\n\r\n### Describe the bug\r\n\r\nI would expect a mature framework to have better unit test examples and especially a simple unit test of a simple view component with a data prop\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2893,2896],{"name":2894,"color":2895},"documentation","5319e7",{"name":2897,"color":2898},"good first issue","fbca04",28346,"No documentation on how to unit test a simple component with data prop","2024-08-08T09:54:58Z","https://github.com/nuxt/nuxt/issues/28346",0.64742357,{"description":2905,"labels":2906,"number":2907,"owner":2868,"repository":2908,"state":2885,"title":2909,"updated_at":2910,"url":2911,"score":2874},"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,"test-utils","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":2905,"labels":2913,"number":2867,"owner":2868,"repository":2908,"state":2885,"title":2909,"updated_at":2914,"url":2915,"score":2874},[],"2023-12-02T00:13:09Z","https://github.com/nuxt/test-utils/issues/380",{"description":2905,"labels":2917,"number":2918,"owner":2868,"repository":2908,"state":2885,"title":2909,"updated_at":2919,"url":2920,"score":2874},[],481,"2023-12-02T00:13:13Z","https://github.com/nuxt/test-utils/issues/481",{"labels":2922,"number":2924,"owner":2868,"repository":2868,"state":2885,"title":2925,"updated_at":2926,"url":2927,"score":2928},[2923],{"name":2879,"color":2880},28608,"type checking error for globally imported vitest globals","2024-08-20T10:23:47Z","https://github.com/nuxt/nuxt/issues/28608",0.66030234,{"labels":2930,"number":2933,"owner":2868,"repository":2868,"state":2885,"title":2934,"updated_at":2935,"url":2936,"score":2937},[2931,2932],{"name":2879,"color":2880},{"name":2882,"color":2883},7899,"TypeScript breaks when the Nuxt application is placed in a sub-folder","2023-01-22T15:36:07Z","https://github.com/nuxt/nuxt/issues/7899",0.6619627,{"description":2939,"labels":2940,"number":2944,"owner":2868,"repository":2908,"state":2885,"title":2945,"updated_at":2946,"url":2947,"score":2948},"Hello,\r\n\r\nI've created a simple nuxt app with a couple of pages and a couple of simple components. \r\n\r\nI've been able to successfully use @nuxt/test-util to integrate test these pages. However, soon as I change the style lang of one of the components from `css` to `scss`. It no longer passes. The test fail to run and I get the following error in the `setupTest`;\r\n\r\n```\r\n console.error\r\n ## There is an issue with `node-fibers` ##\r\n `/Users/xxxxx/learning/vue/nuxt-playground/node_modules/fibers/bin/darwin-x64-83/fibers.node` is missing.\r\n \r\n Try running this to fix the issue: /usr/local/Cellar/node/14.9.0/bin/node /Users/fawad.ali/learning/vue/nuxt-playground/node_modules/fibers/build\r\n\r\n at Object.\u003Canonymous> (node_modules/fibers/fibers.js:17:11)\r\n at getSassOptions (node_modules/sass-loader/dist/utils.js:140:25)\r\n at Object.loader (node_modules/sass-loader/dist/index.js:43:55)\r\n at LOADER_EXECUTION (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:119:14)\r\n ```\r\n \r\n The app runs fine and the component does successfully style correctly when using `scss`.\r\n\r\nI'm bit lost as to what could be going wrong here. I've installed sass-loader@10.1.1 since that seems to be the required loader.\r\n\r\nMy jest.config.js currently looks like this;\r\n```\r\nmodule.exports = {\r\n preset: '@nuxt/test-utils',\r\n moduleNameMapper: {\r\n '^@/(.*)$': '\u003CrootDir>/src/$1'\r\n },\r\n moduleFileExtensions: [\r\n 'ts',\r\n 'js',\r\n 'vue',\r\n 'json'\r\n ],\r\n transform: {\r\n \"^.+\\\\.ts$\": \"ts-jest\",\r\n '^.+\\\\.js$': 'babel-jest',\r\n '.*\\\\.(vue)$': 'vue-jest',\r\n '.+\\\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':\r\n 'jest-transform-stub',\r\n },\r\n globals: {\r\n \"vue-jest\": {\r\n \"hideStyleWarn\": true,\r\n \"experimentalCSSCompile\": true,\r\n \"resources\": {\r\n \"scss\": [\r\n './assets/scss/main.scss'\r\n ]\r\n }\r\n }\r\n },\r\n transformIgnorePatterns: [\r\n 'node_modules/(?!(nuxt-i18n)/)'\r\n ],\r\n collectCoverage: true,\r\n collectCoverageFrom: [\r\n '\u003CrootDir>/components/**/*.vue',\r\n '\u003CrootDir>/pages/**/*.vue'\r\n ],\r\n setupFiles: [\r\n '\u003CrootDir>/jest.init.js'\r\n ],\r\n testEnvironment: 'jsdom',\r\n testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)']\r\n}\r\n```\r\n\r\nAny help would be appreciated",[2941],{"name":2942,"color":2943},"v0","4137F6",338,"sass-loader issues for scss styled components","2024-05-01T16:04:33Z","https://github.com/nuxt/test-utils/issues/338",0.6629132,{"labels":2950,"number":2957,"owner":2868,"repository":2868,"state":2885,"title":2958,"updated_at":2959,"url":2960,"score":2961},[2951,2954],{"name":2952,"color":2953},"3.x","29bc7f",{"name":2955,"color":2956},"bug","d73a4a",12771," error TS5083: Cannot read file 'project/.nuxt/tsconfig.json'.","2023-01-19T16:16:28Z","https://github.com/nuxt/nuxt/issues/12771",0.66383404,["Reactive",2963],{},["Set"],["ShallowReactive",2966],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$flKCJHDyIZj_tOc-JqAyv4nPsqJ0J3qPvWvXzKBAatOk":-1},"/nuxt/test-utils/293"]