mountSuspended with i18n #585
Description
I'm setting up the nuxt-vitest module in my project. Though I'm running into some issues getting a simple test, I use mountSuspended(Logo) to test the mounting of a Logo component. This component uses i18n. Whereas when I'm using mount from Vitest the test passes.
The error I'm getting is as follows:
Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
SyntaxError: Need to install with `app.use` function
❯ Module.createCompileError ../node_modules/.pnpm/@intlify+message-compiler@9.3.0-beta.17/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:54:19
❯ createI18nError ../node_modules/.pnpm/vue-i18n@9.3.0-beta.17_vue@3.3.4/node_modules/vue-i18n/dist/vue-i18n.runtime.mjs:97:34
96| [I18nErrorCodes.INVALID_ARGUMENT]: 'Invalid argument',
97| [I18nErrorCodes.MUST_BE_CALL_SETUP_TOP]: 'Must be called at the top of a `setup` function',
98| [I18nErrorCodes.NOT_INSLALLED]: 'Need to install with `app.use` function',
| ^
99| [I18nErrorCodes.UNEXPECTED_ERROR]: 'Unexpected error',
100| [I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE]: 'Not available in legacy mode',
❯ Module.useI18n ../node_modules/.pnpm/vue-i18n@9.3.0-beta.17_vue@3.3.4/node_modules/vue-i18n/dist/vue-i18n.runtime.mjs:2253:15
❯ setup app.vue:33:40
And while we are at it. Is there a way to test with the translated i18n messages iso the keys?
Here are some snippets from my configuration.
vitest.config.js
...
export default defineVitestConfig({
resolve: {
alias
},
test: {
dir: tests,
setupFiles: ['tests/unit.setup.ts'],
environment: 'jsdom',
globals: true,
root: rootDir,
environmentOptions: {
nuxt: {
rootDir
}
}
}
})
./test/nuxt/components/Logo.nuxt.spec.ts (with mountSuspended)
import { describe, it, expect } from 'vitest'
import { mountSuspended } from 'vitest-environment-nuxt/utils'
import Logo from '@/components/header/Logo.vue'
describe('HeaderLogo', () => {
it('can mount some component', async () => {
const component = await mountSuspended(Logo)
expect(component.vm).toBeTruthy()
expect(component.text()).toMatchInlineSnapshot(
'"global.logo-brand-name.global.logo-brand-localehomepage.logo-tagline"'
)
})
})
./tests/unit.setup.ts
import { config } from '@vue/test-utils'
import { createI18n } from 'vue-i18n'
import nlNL from '~/locales/nl_NL.json'
const i18n = createI18n({
legacy: false,
locale: 'nl_NL',
missing: (_, key) => key,
messages: {
nlNL
}
})
config.global.mocks = {
t: msg => msg
}
config.global.plugins.push(i18n)
./tests/nuxt/components/Logo.nuxt.spec.ts (without mountSuspended)
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Logo from '@/components/header/Logo.vue'
describe('HeaderLogo', () => {
it('can mount some component', () => {
const component = mount(Logo)
expect(component.vm).toBeTruthy()
expect(component.text()).toMatchInlineSnapshot(
'"global.logo-brand-name.global.logo-brand-localehomepage.logo-tagline"'
)
})
})