Nuxt•2d ago

Testing with i18n and vitest

Hey. I have a simple component that uses $t for translations. I'm trying to write a simple test, but it's failing.

describe('UserSignInForm', () => {
    it('renders', async () => {
        const component = await mountSuspended(UserSignInForm);
        expect(component.html()).toMatchSnapshot();
    });
});

describe('UserSignInForm', () => {
    it('renders', async () => {
        const component = await mountSuspended(UserSignInForm);
        expect(component.html()).toMatchSnapshot();
    });
});

I've tried a few solutions that I found online, but none of them seem to work. The error:

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:81:34
 ❯ Module.useI18n ../node_modules/vue-i18n/dist/vue-i18n.mjs:2184:15
 ❯ setup components/user/sign-in-form/UserSignInForm.vue:19:19
 ❯ wrappedSetup ../node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:96:28
 ❯ clonedComponent.setup ../node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:161:48
 ❯ callWithErrorHandling ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19
 ❯ setupStatefulComponent ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7848:25
 ❯ setupComponent ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7809:36
 ❯ mountComponent ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5159:7

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:81:34
 ❯ Module.useI18n ../node_modules/vue-i18n/dist/vue-i18n.mjs:2184:15
 ❯ setup components/user/sign-in-form/UserSignInForm.vue:19:19
 ❯ wrappedSetup ../node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:96:28
 ❯ clonedComponent.setup ../node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:161:48
 ❯ callWithErrorHandling ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19
 ❯ setupStatefulComponent ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7848:25
 ❯ setupComponent ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7809:36
 ❯ mountComponent ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5159:7

2 Replies

kapa.ai•2d ago

Hi @ægteemil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your issue with testing a component that uses i18n translations in Nuxt with Vitest, you need to properly set up the i18n plugin for your tests. Here's how you can modify your test to make it work: 1. First, make sure you have the latest version of @nuxtjs/i18n installed in your project. 2. Create an i18n.config.ts file in your project root if you haven't already:

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Add your translation keys here
    }
  }
}))

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Add your translation keys here
    }
  }
}))

3. In your nuxt.config.ts, make sure you have the i18n module configured:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

4. Now, modify your test file to include the i18n plugin:

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

// Create an i18n instance
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Add your translation keys here
    }
  }
})

// Add i18n to the global config
config.global.plugins = [i18n]

describe('UserSignInForm', () => {
  it('renders', async () => {
    const component = await mountSuspended(UserSignInForm, {
      global: {
        plugins: [i18n]
      }
    });
    expect(component.html()).toMatchSnapshot();
  });
});

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

// Create an i18n instance
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Add your translation keys here
    }
  }
})

// Add i18n to the global config
config.global.plugins = [i18n]

describe('UserSignInForm', () => {
  it('renders', async () => {
    const component = await mountSuspended(UserSignInForm, {
      global: {
        plugins: [i18n]
      }
    });
    expect(component.html()).toMatchSnapshot();
  });
});

This setup should resolve the "Need to install with app.use function" error you're encountering. The key points are: 1. Creating an i18n instance for your tests. 2. Adding the i18n plugin to the global config for Vue Test Utils. 3. Passing the i18n plugin to the mountSuspended function. Make sure to replace the placeholder messages in the i18n configuration with your actual translation keys. If you're using @nuxt/test-utils, you might also need to configure the Nuxt environment for your tests. You can do this by adding a vitest.config.ts file as described in the Nuxt documentation on testing (https://nuxt.com/docs/getting-started/testing#setup):

import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: {
    environment: 'nuxt'
  }
})

import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: {
    environment: 'nuxt'
  }
})

This configuration ensures that your tests run in a Nuxt environment, which should include the necessary setup for i18n. Remember to restart your test runner after making these changes. If you still encounter issues, double-check that all your i18n-related dependencies are up to date and compatible with your Nuxt version. Nuxt Testing Documentation (https://nuxt.com/docs/getting-started/testing) Stack Overflow - i18n in Nuxt 3 (https://stackoverflow.com/questions/77330239) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@230357473389838336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Testing with i18n and vitest