`@nuxt/test-utils` is not working with `useI18n` from `@nuxtjs/i18n`

[trandaison]

Environment

• Operating System: Darwin
• Node Version: v18.16.0
• Nuxt Version: 3.9.3
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.15.0
• Builder: -
• User Config: devtools, modules
• Runtime Modules: @nuxtjs/i18n@8.0.0
• Build Modules: -

Reproduction

https://github.com/trandaison/test-utils/tree/main/examples/i18n

Describe the bug

I forked these examples then add a component named TheHeader.vue which do use const { t } = useI18n() in the setup script.

<script lang="ts" setup>
const { t } = useI18n();
</script>

<template>
  <h1>{{ t('brand') }}</h1>
</template>

The test will be timeout and unable to run in this case.

If I replace the useI18n composition with the $t function (or don't use any translate function at all) the test will be passed.

<script lang="ts" setup>
// const { t } = useI18n();
</script>

<template>
  <h1>{{ $t('brand') }}</h1>
</template>

Additional context

No response

Logs

No response

[darthf1]

Does it also fail on v3.10.0? I'm hitting (i think) similar errors when updating to v3.11.0, but I still need to investigate.

[daniluk4000]

I think I have similar error on 3.11 as well. Somehow my init of internal refs inside a plugin broke, init has been completed but no init actually happened (my refs are in their initial state).

[trandaison]

@darthf1 I confirm that the error happens on v3.10.0 as well.

[StevenPewsey]

I have found that the below solution works

<script setup lang="ts">
const { t } = useNuxtApp().$i18n
</script>

[trandaison]

@StevenPewsey Yes, it works as same as $t, because of avoid using the useI18n composition. useI18n() didn't work, maybe some other compositions from other 3rd plugin have the same problem, I guess.

[indiehjaerta]

Is this beeing looked at? It's currently holding our enterprise back from upgrading.

Still present using the latest version "nuxt": "^3.11.2", "@nuxt/test-utils": "^3.12.0", "@nuxtjs/i18n": "^8.3.0",

[trandaison]

@indiehjaerta Here is my workaround so far. I create a test setup like this:

import { beforeAll, afterAll, vi } from 'vitest';
import { config } from '@vue/test-utils';
import { createI18n } from 'vue-i18n';

beforeAll(() => {
  vi.mock('vue-i18n', async (importOriginal) => {
    const module = await importOriginal<typeof import('vue-i18n')>();

    return { ...module };
  });
});

afterAll(() => {
  vi.restoreAllMocks();
});

// setup i18n
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  locales: [{ code: 'en', iso: 'en-US', file: 'en-US.yml', name: 'English' }],
  messages: {},
  missing: (locale: string, key: string) => `trans:__${key}__`,
});

config.global.plugins.push(i18n);

[ileskaa]

I have found that the below solution works

<script setup lang="ts">
const { t } = useNuxtApp().$i18n
</script>

Amazing, thanks!