Error when testing with @nuxtjs/test-utils #2637
Description
Environment
Nuxt project info:
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 3.8.0
- CLI Version: 3.9.1
- Nitro Version: 2.7.2
- Package Manager: npm@9.4.2
- Builder: -
- User Config: modules, i18n
- Runtime Modules: @nuxtjs/i18n@8.0.0
- Build Modules: -
Reproduction
https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-4pwdnd?file=test%2Findex.spec.ts
Describe the bug
Nuxt i18n throws errors when using it with vitest and @nuxtjs/test-utils.
Using $t in the template and i18n from useNuxtApp().$i18n work, but useI18n() and i18n-t components fails.
useI18n throws a Syntax error: "SyntaxError: Need to install with app.use function"
i18n-t component shows "Failed to resolve component":
[Vue Router warn]: No match found for location with path "/"
[Vue warn]: Failed to resolve component: i18n-t
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MountSuspendedComponent >
In the reproduction I added failing tests for the component and the composable. The test that only uses $t in the template passes.
Trying to test App with the LanguageSwitcher from the reproduction starter also throws an error in the setup.
Additional context
The issue was originally opened in @nuxtjs/test-utils. @danielroe wrote:
As far as I can tell the issue here is because the @nuxtjs/i18n module is calling vueApp.use on the CJS version of vue-i18n, but when we use useI18n in the test, it's the ESM version of the library, and so it thinks it's not registered.
This issue is currently the main obstacle for Openverse Nuxt 3 migration
Logs
Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
SyntaxError: Need to install with `app.use` function
❯ Module.createCompileError node_modules/@intlify/message-compiler/dist/message-compiler.mjs:78:19
76| : code;
77| const error = new SyntaxError(String(msg));
78| error.code = code;
| ^
79| if (loc) {
80| error.location = loc;
❯ createI18nError node_modules/vue-i18n/dist/vue-i18n.mjs:105:34
❯ Module.useI18n node_modules/vue-i18n/dist/vue-i18n.mjs:2313:15
❯ setup components/LangSwitcher.vue:18:47
❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18
❯ setupStatefulComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7190:25
❯ setupComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7151:36
❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5555:7
❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5521:9
❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5007:11