test-utils: Vue-I18n not loaded

I’m currently trying to implement component tests for a component that uses vue-i18n and I’m getting this error:

SyntaxError: Need to install with `app.use` function
 - /var/www/html/node_modules/@intlify/core-base/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.js:58:19
 - /var/www/html/node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js:105:34
 - /var/www/html/node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js:2224:15
 - /components/metronic/form/Input.vue:326:1
 - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:171:22
 - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7194:29
 - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7149:11
 - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:13
 - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5455:17
 - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5059:21

I have @intlify/nuxt3 configured in my nuxt.config.ts:

export default defineNuxtConfig({
    modules: ["@pinia/nuxt", "@nuxtjs/tailwindcss", "@intlify/nuxt3", "@nuxtjs/google-fonts", "@vueuse/nuxt", "nuxt-vitest"],
    intlify: {
        localeDir: "locales",
        vueI18n: {
            locale: "de",
        },
    },
// ...

I’m working around this problem by manually using createI18n in my setup file and adding it to the global plugins of vue test-utils:

import { config } from '@vue/test-utils';
import { createI18n } from 'vue-i18n';

config.global.plugins.push(
    createI18n({
        locale: 'de',
        legacy: false,
    })
);

Then, since I’m also testing using @testing-library/vue which has another bug, I also have to use the workaround described there to also get the plugin working for testing-library.

I know there is nobody to blame but component tests are DX-wise very bad. I have to invest more time into getting the tests to actually work, than writing them 😕

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 18 (4 by maintainers)

Most upvoted comments

Here’s an example of integrating with @nuxtjs/i18n: https://github.com/nuxt/test-utils/tree/main/examples/i18n.

danielroe on Dec 19, 2023

Got this working without creating a new instance of i18n.

https://stackblitz.com/edit/nuxt-starter-px8r35?file=test%2Fsetup.ts,app.vue,nuxt.config.ts

import { config } from '@vue/test-utils';

try {
  // For .nuxt.test files reuse the nuxt's i18n instance
  const nuxtApp = useNuxtApp();

  config.global.plugins.push({
    async install(app, ...options) {
      const i18n = nuxtApp.vueApp.__VUE_I18N__;

      await i18n.install(app, ...options);
    },
  });
} catch {
  // For .test files we don't make i18n available
}

It seems weird to me that there’s a whole another vue app being created by nuxt that is different than the one created by @vue/test-utils. All vue plugins installed via nuxt modules have to be manually re-installed on the test vue instance. I would’ve assumed that that part of nuxt’s initialization would be stubbed by this module and all plugins would be forwarded to the test app.

unshame on Jun 13, 2023

@QozbroQqn I made a minimal stackblitz project with the way I’m working with it. Maybe it helps: https://stackblitz.com/edit/nuxt-starter-bjyxnr

Floppy012 on Apr 20, 2023