Error: $initialize.t is not a valid method (Vite, Vue 3, TypeScript, vue-i18n)

Question

Error: $initialize.t is not a valid method (Vite, Vue 3, TypeScript, vue-i18n)

I've been working on unit testing a simple component that utilizes translations with the vue-i18n module. Here's an overview of the files involved:

src/i18n/index.ts

import { createI18n } from 'vue-i18n';
    
export function loadLanguages() {
  const context = import.meta.globEager('./languages/*.ts');

  const languages: Record<string, any> = {};

  const langs = Object.keys(context);
  for (const key of langs) {
    if (key === './index.ts') return;
    const { lang } = context[key];
    const name = key.replace(/(\.\/languages\/|\.ts)/g, '');
    languages[name] = lang;
  }

  return languages;
}

export const i18n = createI18n({
  legacy: false,
  locale: 'es',
  fallbackLocale: 'es',
  messages: loadLanguages(),
  missingWarn: false,
  fallbackWarn: false,
});

export const i18nGlobal = i18n.global;

export function setLanguage(locale: string) {
  i18n.global.locale.value = locale;
}

src/i18n/hooks/helper.ts

import { useI18n } from 'vue-i18n';
import { watch } from 'vue';
import { useGetters } from '@store-common/hooks/helpers';

export const useI18nGlobal = () => useI18n({ useScope: 'global' });

export const useI18nLocal = () => {
  const { locale } = useI18nGlobal();

  const local = useI18n({
    locale: locale.value as string,
    inheritLocale: true,
    useScope: 'local',
  });

  const { getLocale } = useGetters();

  watch(getLocale, (loc: string) => {
    local.locale.value = loc;
  });

  return local;
};

src/components/Example.vue

<template>
  <div>
    {{ greeting }}
    {{ t('common.btn.send') }}
    {{ translate }}
  </div>
</template>

<script setup lang="ts">
import { useI18nLocal } from '@i18n/hooks/helper';

const { t } = useI18nLocal();

const greeting = 'Vue and TDD';
const translate = t('common.btn.send');
</script>

src/components/tests/Example.spec.ts

import { shallowMount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import Example from '../Example.vue';

describe('Example.vue', () => {
  it('Traducciones i18n', () => {
    const wrapper = shallowMount(Example);
    expect(wrapper.text()).toMatch('Vue and TDD');
    expect(wrapper.vm.translate).toMatch('Enviar');
  });
});

package.json

{
  "name": "PROJECT_NAME",
  "version": "1.0.0",
  "scripts": {
    ...
    "test:unit": "vitest --environment jsdom --dir src/ --coverage",
    ...
  },
}

While running the yarn test:unit command specified in the package.json, I encountered the following error message:

cmd> yarn test:unit

yarn run v1.22.11
warning package.json: No license field
warning ..\..\package.json: No license field
$ vitest --environment jsdom --dir src/ --coverage Example

 DEV  v0.25.5 C:/Users/jgomezle/projects/HISVAR_FRONT
      Coverage enabled with c8

 ❯ src/shared/components/__tests__/Example.spec.ts (1)
   ❯ Example.vue (1)
     × Traducciones i18n

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
 FAIL  src/shared/components/__tests__/Example.spec.ts > Example.vue > Traducciones i18n
TypeError: $setup.t is not a function
 ❯ Proxy._sfc_render src/shared/components/Example.vue:20:207

...

As we can see from the error <code>TypeError: $setup.t is not a function, it appears that the t function from the i18n module cannot be found to carry out the translations.
I have attempted to mock the t function in various ways during shallowMount, but none have proven effective as the error persists. These are the different configurations I have tried:
const wrapper = shallowMount(Example, {
      mocks: {
        t: (str) => str,
        setup: {
          t: (str) => str,
        },
        $setup: {
          t: (str) => str,
        },
      },
      global: {
        mocks: {
          useI18n: {
            t: (msg) => msg,
            $t: (msg) => msg,
          },
          $setup: {
            t: (msg) => msg,
            $t: (msg) => msg,
          },
          setup: {
            t: (msg) => msg,
            $t: (msg) => msg,
          },
          t: (msg) => msg,
          $t: (msg) => msg,
        },
        // plugins: [i18n],
      },
    });

I have also experimented with these configurations, but unfortunately, the issue persists:
import { config } from '@vue/test-utils';

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

typescript unit-testing vuejs3 vue-i18n vitest

Answer 1

Answer №1

The reason behind this error is that you are directly calling the t() function in your template. To avoid this error, it is recommended to call the t() method within a computed property and then use this computed property in your template. Here's an example:

// Define a computed property in your <script setup>
const buttonText = computed(() => t('common.btn.send'));

// Use the computed property in your <template>
{{ buttonText }}

If you discover the exact reason for this error, please share it with me! In the meantime, I will continue using this approach.

Answer 2

The reason behind this error is that you are directly calling the t() function in your template. To avoid this error, it is recommended to call the t() method within a computed property and then use this computed property in your template. Here's an example:

// Define a computed property in your <script setup>
const buttonText = computed(() => t('common.btn.send'));

// Use the computed property in your <template>
{{ buttonText }}

If you discover the exact reason for this error, please share it with me! In the meantime, I will continue using this approach.

Answer 3

Answer №2

Ha, stumbled upon your question while searching for a solution :)

Fortunately, this method did the trick for me. I recalled seeing someone else facing the same issue and here we are again :)

The main idea that eluded both of us is that when you mount a component in tests, it operates independently from your application. It functions as its own separate entity. Therefore, if you want to incorporate translations (and not just simulate them), you must manually initialize the i18n plugin for each test execution (or globally for all tests, as explained in the answer provided in my referenced link).

Answer 4

Ha, stumbled upon your question while searching for a solution :)

Fortunately, this method did the trick for me. I recalled seeing someone else facing the same issue and here we are again :)

The main idea that eluded both of us is that when you mount a component in tests, it operates independently from your application. It functions as its own separate entity. Therefore, if you want to incorporate translations (and not just simulate them), you must manually initialize the i18n plugin for each test execution (or globally for all tests, as explained in the answer provided in my referenced link).

Answer 5

Answer №3

My answer on Stackoverflow got posted as a comment due to its simplicity. Let's give it another shot...

I recently discovered a workaround for mocking vue-i18n and detailed the process here.

To sum it up, here is how I implemented it in my test:

import { useI18n } from "vue-i18n";
// ... other imports

vi.mock("vue-i18n");

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

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

// tests

In the future, I plan to explore implementing this globally rather than in each individual test file.

Answer 6

My answer on Stackoverflow got posted as a comment due to its simplicity. Let's give it another shot...

I recently discovered a workaround for mocking vue-i18n and detailed the process here.

To sum it up, here is how I implemented it in my test:

import { useI18n } from "vue-i18n";
// ... other imports

vi.mock("vue-i18n");

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

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

// tests

In the future, I plan to explore implementing this globally rather than in each individual test file.

Answer 7

Answer №4

Example setup files to the rescue:

// custom-config.ts
export default defineConfig({
  root: './src/',
  test: {
    setupFiles: ['./custom-setup.ts'],
  }
})

// src/modules/language.ts
import { createLanguageModule } from 'vue-language';

export default createLanguageModule({
  // ...
});

// src/custom-setup.ts
import language from '@/modules/language';
import { config } from '@vue/test-utils';

// @ts-expect-error type
if (!globalThis.loaded) {
  config.global.plugins = [language];
  // @ts-expect-error type
  globalThis.loaded = true;
}

Answer 8

Example setup files to the rescue:

// custom-config.ts
export default defineConfig({
  root: './src/',
  test: {
    setupFiles: ['./custom-setup.ts'],
  }
})

// src/modules/language.ts
import { createLanguageModule } from 'vue-language';

export default createLanguageModule({
  // ...
});

// src/custom-setup.ts
import language from '@/modules/language';
import { config } from '@vue/test-utils';

// @ts-expect-error type
if (!globalThis.loaded) {
  config.global.plugins = [language];
  // @ts-expect-error type
  globalThis.loaded = true;
}

Answer 9

Answer №5

If you're working with Cypress instead of directly using Vitest and encountering the same issue, I came across a helpful solution on this GitHub page.

The approach involves adding a listener to the mount function within Cypress to incorporate elements into the global context (specifically i18n in this case).

To achieve this, simply insert the following code snippet into the cypress/support/component.ts file:

import { createI18n } from "vue-i18n";
import en from "../../src/locales/en.json";

// ...

// You can also share this config with your main.ts file
const i18nOptions = {
  locale: "en",
  fallbackLocale: "en",
  legacy: false,
  messages: {
    en,
  },
};

// ...

// Update the current definition of the "mount" command in Cypress with
Cypress.Commands.add("mount", (component, options = {}) => {
  options.global = options.global || {};
  options.global.plugins = options.global.plugins || [];

  // Create i18n if not provided
  if (!options.i18n) {
    options.i18n = createI18n(i18nOptions);
  } else {
    options.i18n = createI18n(options.i18n);
  }

  // Add i18n plugin
  options.global.plugins.push({
    install(app) {
      app.use(options.i18n);
    },
  });

  return mount(component, options);
});

// ...

By the way, the same process can be applied for Pinia as well, with more information available on the referenced GitHub repository.

Answer 10

If you're working with Cypress instead of directly using Vitest and encountering the same issue, I came across a helpful solution on this GitHub page.

The approach involves adding a listener to the mount function within Cypress to incorporate elements into the global context (specifically i18n in this case).

To achieve this, simply insert the following code snippet into the cypress/support/component.ts file:

import { createI18n } from "vue-i18n";
import en from "../../src/locales/en.json";

// ...

// You can also share this config with your main.ts file
const i18nOptions = {
  locale: "en",
  fallbackLocale: "en",
  legacy: false,
  messages: {
    en,
  },
};

// ...

// Update the current definition of the "mount" command in Cypress with
Cypress.Commands.add("mount", (component, options = {}) => {
  options.global = options.global || {};
  options.global.plugins = options.global.plugins || [];

  // Create i18n if not provided
  if (!options.i18n) {
    options.i18n = createI18n(i18nOptions);
  } else {
    options.i18n = createI18n(options.i18n);
  }

  // Add i18n plugin
  options.global.plugins.push({
    install(app) {
      app.use(options.i18n);
    },
  });

  return mount(component, options);
});

// ...

By the way, the same process can be applied for Pinia as well, with more information available on the referenced GitHub repository.

Error: $initialize.t is not a valid method (Vite, Vue 3, TypeScript, vue-i18n)

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

An issue has been identified in the node_modules/xterm/typings/xterm.d.ts file at line 10, causing an error with code TS1084. The 'reference' directive syntax used

How can Angular2 detect when an entity is clicked within a window?

Managing circular dependencies in React useEffect functions

Encountering failures while running Angular tests in GitHub Actions due to reading inner text (which works fine locally)

TypeORM issue - UnsupportedDataTypeError

Exploring the power of Jasmine with multiple spy functionalities

Using Angular2 to Inject a Service into Another Service

Conceal the message using star symbols

Creating a typescript array with values matching keys in an object: How to do it?

I believe there may be a gap in the communication between TypeScript, JavaScript, Angular, Nginx, Alpine, and Docker within the network using Nginx. I am

React Project Encounters NPM Installation Failure

Exploring the implementation of query parameters in Nest.js

Running asynchronous Jest tests within VueJS lifecycle hooks while utilizing a timer interval

Setting cursor position in input field when navigating with arrow keys: What are the ways to achieve accessibility?

In TypeScript, the 'onChange' is declared multiple times, therefore this particular usage will be scrutinized carefully

Error Encountered When Attempting to Utilize Custom Component on Homepage - Typescript Exception

utilize the useRef hook to display the total number of characters within a text area

Inserting information into an array: Access the final index consistently with TypeScript

Importing JSON files dynamically in Typescript with Quasar/Vue using different variable names

What is the most efficient method for designing a nested object with two levels of enums, allowing for some enum values to be optional?