@nuxtjs/i18n test errors
Hi everyone,
I'm using the @nuxtjs/i18n library in my Nuxt project and am currently writing a test for a Vue component. However, I keep running into the following errors:
"Need to install with app.use function"
"$t is not a function"
My component is fairly simple, rendering translations inside the <template> using $t.
Here’s the basic test I'm working on:
test('renders all child components', () => {
const wrapper = mount(AppSettings, {
global: {
components: mockComponents,
mocks: {
$t: (key: string) => key, // Mocking the i18n $t function
},
},
});
Object.keys(mockComponents).forEach((componentName) => {
expect(wrapper.findComponent({ name: componentName }).exists()).toBe(true);
});
});
I've tried mocking the $t function, but I still get the "Need to install with app.use function" error. Does anyone know why this is happening or how to resolve it?
Thanks!8 Replies
Hi everyone,
I'm using the @nuxtjs/i18n library in my Nuxt project and am currently writing a test for a Vue component. However, I keep running into the following errors:
"Need to install with app.use function"
"$t is not a function"
My component is fairly simple, rendering translations inside the <template> using $t.
Here’s the basic test I'm working on:
test('renders all child components', () => {
const wrapper = mount(AppSettings, {
global: {
components: mockComponents,
mocks: {
$t: (key: string) => key, // Mocking the i18n $t function
},
},
});
Object.keys(mockComponents).forEach((componentName) => {
expect(wrapper.findComponent({ name: componentName }).exists()).toBe(true);
});
});
I've tried mocking the $t function, but I still get the "Need to install with app.use function" error. Does anyone know why this is happening or how to resolve it?
Thanks!You need to create an i18n plugin for your tests. I have a mocks/i18n.ts
import { createI18n } from 'vue-i18n'
import en from '~/locales/en-CA'
import fr from '~/locales/fr-CA'
export const enI18n = createI18n({
legacy: false,
locale: 'en-CA',
messages: {
'en-CA': en
}
})
export const frI18n = createI18n({
legacy: false,
locale: 'fr-CA',
messages: {
'fr-CA': fr
}
})
export const randomI18n = createI18n({
legacy: false,
locale: 'ja',
messages: {
ja: en
}
})
Then import your i18n mock and use in your component:
const wrapper = await mountSuspended(MyComponent, {
global: {
plugins: [enI18n]
}
})
Sorry for the formatting, I’m on mobile.Thank you. I tried that without mountSuspended and it didnt work. Now i tried it with mountSuspended and it gives another error:
Test timed out in 50000ms.
If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
I tried to increase the timeout, but it gives the same error
Here is my code:
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
legacy: false,
locale: 'en',
messages: {
en: {
'test': 'test'
}
}
})
describe('Component', () => {
test('renders all components', async () => {
const wrapper = await mountSuspended(AppSettings, {
global: {
components: mockComponents,
plugins: [i18n]
}
})
Object.keys(mockComponents).forEach((componentName) => {
expect(wrapper.findComponent({ name: componentName }).exists()).toBe(true)
})
}, 50000)
})
Is creating the plugin with createI18n from the vue-i18n the approach we are looking for? I'm using @nuxtjs/i18n
@dwol
Yes using createI18n from vue is correct. I’m using this in my projects.
I would try creating a test with a simple component to see if it’s something else causing the issue.
Ex: instead of testing AppSettings try creating and testing a basic component like a HelloWorld or something like that
you are right. its working with the simple div inside component. one of my child components its causing it to timeout for some reason
@dwol Do you know a best way to implement this because I have more than 300 tests. Is there a way to implement this change globally? Inject the i18n plugin outside the actual tests?
I’m not at a computer right now so it’s not easy to link stuff but if you lookup ‘setup files’ for the vitest config you should be able to set it up for every test.
I managed to make it work with the setup files in vitest config as you said
This is my setup file:
const i18n = createI18n({
locale: 'en',
legacy: false,
globalInjection: true,
messages: {
en
}
})
config.global.plugins = [i18n]
Thank you.
Glad you got it working!