Code Monkey home page Code Monkey logo

Comments (5)

PanDymitr avatar PanDymitr commented on June 8, 2024 5

Vitest setup files to the rescue:

// vite.config.ts
export default defineConfig({
  test: {
    root: './src/',
    setupFiles: ['./setup.ts'],
  }
})
// src/plugins/i18n.ts
import { createI18n } from 'vue-i18n';

export default createI18n({
  // ...
});
// src/setup.ts
import i18n from '@/plugins/i18n';
import { config } from '@vue/test-utils';

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

from vue-testing-library.

fabio984 avatar fabio984 commented on June 8, 2024 2

I'm using Vue 3 with script setup (Single File Component) and Jest.

my_i18n_lib_path/i18n.ts:

import { I18n, createI18n } from 'vue-i18n';

const i18n: I18n = createI18n({
	legacy: false,
	locale: 'en',
	messages: {},
	missing: (locale, key) =>
		console.error('Translation not found! Locale:', locale, 'translation key:', key),
});

the SFC myComponent.vue file:

import { useI18n } from 'vue-i18n';

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

then the test:

import { shallowMount } from '@vue/test-utils';
import { i18n } from 'my_i18n_lib_path/i18n';

describe('myComponent.vue', () => {
	it('Should eat onions like apples', () => {
		// Arrange
		const wrapper = shallowMount(myComponent, {
			global: {
				plugins: [i18n],
				mocks: { t: (key: string) => key },
			},
		});
	});
});

Hope this helps someone, or if it can be improved, just share.

from vue-testing-library.

Korny666 avatar Korny666 commented on June 8, 2024

Has anyone a solution yet? - Struggling with the same problem

from vue-testing-library.

cbush06 avatar cbush06 commented on June 8, 2024

I added config.global.plugins = [VueI18n] to setup.ts.

Then, I used this in my test:

        const { getByTestId } = render({
            ...ResultsForAttemptVue,
            setup() {
                return { t: useI18n().t };
            },
        });

This seems very hackish, but nothing else would work.

from vue-testing-library.

isimehmeti-bga avatar isimehmeti-bga commented on June 8, 2024

if anyone still having the issue

import { vi } from 'vitest';

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

fond solution from here

from vue-testing-library.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.