Tips for creating mocks/stubs for vue-i18n?

Question

Tips for creating mocks/stubs for vue-i18n?

I have recently made the switch from Jest to Vitest as my unit testing library for my Vue 3 application.

Currently, I am facing an issue while trying to write a unit test for a component that utilizes the vue-i18n library for text translation. When attempting to mount this component in my test file, it fails with the error:

ReferenceError: t is not defined

I would like to know the correct method to stub/mock t from the

import { useI18n } from 'vue-i18n'

statement when writing tests using the Vitest library.

It's worth noting that the previous approach no longer works after upgrading from Vue2 to Vue3:

const wrapper = shallowMount(MyComponent, {
  global: {
    mocks: {
      $t: () => {}
    }
  }
})

Below are some relevant package versions:

"vue": "^3.2.31",
"vue-i18n": "^9.2.0-beta.14",
"vite": "^2.9.0",
"vitest": "^0.10.2"

Thank you!

javascript vue.js vuejs3 vue-i18n vitest

Answer 1

Answer №1

If you want to globally mock this, there is no need to duplicate the code in each test suite.

// vitest.config.ts
import { mergeConfig } from 'vite';
import { defineConfig } from 'vitest/config';
import viteConfig from './vite.config';

export default defineConfig(
    mergeConfig(viteConfig, { // extending app vite config
        test: {
            setupFiles: ['tests/unit.setup.ts'],
            environment: 'jsdom',
        }
    })
);

// tests/unit.setup.ts
import { config } from "@vue/test-utils"

config.global.mocks = {
  $t: tKey => tKey; // just return translation key
};

Answer 2

If you want to globally mock this, there is no need to duplicate the code in each test suite.

// vitest.config.ts
import { mergeConfig } from 'vite';
import { defineConfig } from 'vitest/config';
import viteConfig from './vite.config';

export default defineConfig(
    mergeConfig(viteConfig, { // extending app vite config
        test: {
            setupFiles: ['tests/unit.setup.ts'],
            environment: 'jsdom',
        }
    })
);

// tests/unit.setup.ts
import { config } from "@vue/test-utils"

config.global.mocks = {
  $t: tKey => tKey; // just return translation key
};

Answer 3

Answer №2

I found Panos Vakalopoulos’s solution to be effective.

Furthermore, the code is capable of running globally.

For more information, visit

// vite.config.ts
export default defineConfig(
    // include test configuration
    test: {
        environment: 'jsdom',
        setupFiles: 'vitest.setup.ts',
    }
);

// vitest.setup.ts'
import { config } from '@vue/test-utils'
import { createI18n } from 'vue-i18n'
const i18n = createI18n()
config.global.plugins = [i18n]

// YourComponent.vue
<div id="app">
    <p>{{ t("message.hello") }}</p>
</div>

<script lang="ts" setup>
    import { useI18n } from 'vue-i18n'
    const { t } = useI18n()
</script>

// component_test.ts
describe('xxx', () => {
    it('yyy', () => {
        const wrapper = mount(YourComponent);
    }
})

It's worth noting that if you are using global configuration like $t, Luckylooke's approach would be suitable.

// YourComponent.vue
<div id="app">
    <p>{{ $t("message.hello") }}</p>
</div>

// tests/unit.setup.ts
import { config } from "@vue/test-utils"

config.global.mocks = {
    $t: tKey => tKey; // simply returning translation key
};

Answer 4

I found Panos Vakalopoulos’s solution to be effective.

Furthermore, the code is capable of running globally.

For more information, visit

// vite.config.ts
export default defineConfig(
    // include test configuration
    test: {
        environment: 'jsdom',
        setupFiles: 'vitest.setup.ts',
    }
);

// vitest.setup.ts'
import { config } from '@vue/test-utils'
import { createI18n } from 'vue-i18n'
const i18n = createI18n()
config.global.plugins = [i18n]

// YourComponent.vue
<div id="app">
    <p>{{ t("message.hello") }}</p>
</div>

<script lang="ts" setup>
    import { useI18n } from 'vue-i18n'
    const { t } = useI18n()
</script>

// component_test.ts
describe('xxx', () => {
    it('yyy', () => {
        const wrapper = mount(YourComponent);
    }
})

It's worth noting that if you are using global configuration like $t, Luckylooke's approach would be suitable.

// YourComponent.vue
<div id="app">
    <p>{{ $t("message.hello") }}</p>
</div>

// tests/unit.setup.ts
import { config } from "@vue/test-utils"

config.global.mocks = {
    $t: tKey => tKey; // simply returning translation key
};

Answer 5

Answer №3

I recently came across a helpful tutorial on mocking vue-router. Inspired by this, I decided to create a similar solution for vue-i18n and was pleased with the results.

Component (HelloWorld.vue)

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <div class="greetings">
    <h1>{{ t("commonsmessagehello") }}</h1>
    <h2>{{ t("localhello") }}</h2>
    <h2>{{ $t("message.success") }}</h2>
  </div>
</template>

<i18n src="../commons/locales.json"></i18n>
<i18n>
{
  "enUS": {
    "localhello": "local helloooooo"
  }
}
</i18n>

Test

import { describe, it, expect, vi } from "vitest";
import { mount, config } from "@vue/test-utils";
import { useI18n } from "vue-i18n";
import HelloWorld from "../HelloWorld.vue";

vi.mock("vue-i18n");

useI18n.mockReturnValue({
  t: (tKey) => tKey,
});

config.global.mocks = {
  $t: (tKey) => tKey,
};

describe("HelloWorld", () => {
  it("renders properly", () => {
    const wrapper = mount(HelloWorld, { });
    expect(wrapper.text()).toContain("message.success");
  });
});

This approach successfully worked for both t and $t.

While effective, this may not be the most efficient method. In the future, I hope to explore options for implementing this globally across all tests.

Answer 6

I recently came across a helpful tutorial on mocking vue-router. Inspired by this, I decided to create a similar solution for vue-i18n and was pleased with the results.

Component (HelloWorld.vue)

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <div class="greetings">
    <h1>{{ t("commonsmessagehello") }}</h1>
    <h2>{{ t("localhello") }}</h2>
    <h2>{{ $t("message.success") }}</h2>
  </div>
</template>

<i18n src="../commons/locales.json"></i18n>
<i18n>
{
  "enUS": {
    "localhello": "local helloooooo"
  }
}
</i18n>

Test

import { describe, it, expect, vi } from "vitest";
import { mount, config } from "@vue/test-utils";
import { useI18n } from "vue-i18n";
import HelloWorld from "../HelloWorld.vue";

vi.mock("vue-i18n");

useI18n.mockReturnValue({
  t: (tKey) => tKey,
});

config.global.mocks = {
  $t: (tKey) => tKey,
};

describe("HelloWorld", () => {
  it("renders properly", () => {
    const wrapper = mount(HelloWorld, { });
    expect(wrapper.text()).toContain("message.success");
  });
});

This approach successfully worked for both t and $t.

While effective, this may not be the most efficient method. In the future, I hope to explore options for implementing this globally across all tests.

Answer 7

Answer №4

import { createI18n } from 'vue-i18n';

describe('example', () => {
   it('testing component with multiple language support', () => {
      const i18n = createI18n({
         messages: {
            en: {},
            fr: {},
            es: {},
            ...
         }
      });
      
      const wrapper = mount(YourComponent, {
         global: {
            plugins: [i18n]
         }
      });
   }
})

Answer 8

import { createI18n } from 'vue-i18n';

describe('example', () => {
   it('testing component with multiple language support', () => {
      const i18n = createI18n({
         messages: {
            en: {},
            fr: {},
            es: {},
            ...
         }
      });
      
      const wrapper = mount(YourComponent, {
         global: {
            plugins: [i18n]
         }
      });
   }
})

Answer 9

Answer №5

One-stop solution for Composition API at a global level:

import { vi } from 'vitest';

vi.mock('vue-i18n', () => ({
  useI18n: () => ({
    t: (key: string) => key,
    d: (key: string) => key,
  }),
}));

Answer 10

One-stop solution for Composition API at a global level:

import { vi } from 'vitest';

vi.mock('vue-i18n', () => ({
  useI18n: () => ({
    t: (key: string) => key,
    d: (key: string) => key,
  }),
}));

Answer 11

Answer №6

If you are utilizing the composition API and encountering the issue where $setup.t is not recognized as a function, it could be due to incorrect configuration of the createI18n instance in your test setup:

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

const i18n = createI18n({
  legacy: false,
  allowComposition: true
})
config.global.plugins = [i18n]

Remember to include legacy: false and allowComposition: true to enable the use of the composition API. Failure to do so will result in the undefined $setup.t error message popping up.

Answer 12

If you are utilizing the composition API and encountering the issue where $setup.t is not recognized as a function, it could be due to incorrect configuration of the createI18n instance in your test setup:

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

const i18n = createI18n({
  legacy: false,
  allowComposition: true
})
config.global.plugins = [i18n]

Remember to include legacy: false and allowComposition: true to enable the use of the composition API. Failure to do so will result in the undefined $setup.t error message popping up.

Tips for creating mocks/stubs for vue-i18n?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

CF component not able to accept arguments when invoked by JavaScript through cfajaxproxy

Is there a way to prevent ng-template-loader from scanning image src's?

I am experiencing issues with the functionality of front-page.php on my WordPress website

The stream.write function cannot be executed as a callable expression

Manipulating all components of a specific type in App.vue with VueJS: Is it possible?

Having trouble sending data from the controller to the view in Laravel 8

What is the best way to transfer an image between Angular components and then showcase it?

Using jQuery, generate a dynamic form to create a multidimensional array

Issues with Mega Menu functionality preventing items from being clickable and links from properly navigating

Tips for showing a variety of headers on your page

Efficiently and consistently refreshing the DOM with information while maintaining page integrity

Leveraging jQuery.ajax() for retrieving c# WebMethod data triggers the error message of 'Unidentified Web Method'

Tips for toggling the appearance of like and add to cart icons

How can one determine the dimensions of the browser window using a property?

Utilize interpolation with ES6 and an Angular 1.4 directive

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

Is it possible to incorporate swigjs within scripts?

How can I generate a hyperlink for a specific directory on Github Pages?

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

The execution of the function halts as soon as the player emerges victorious