I am trying to performed End to End testing on my index.vue page according to the documentation. My project requires that SSR is false but, when disabled, my Vitest unit tests fail.
This is my index.nuxt.test.js file:
import { describe, expect, it } from 'vitest'
import { setup, $fetch } from '@nuxt/test-utils'
describe('The page starts up', async () => {
await setup({
rootDir: '../',
server: true
})
it('contains "welcome to the homepage"', async () => {
expect(await $fetch('/')).toMatch('homepage')
})
})
Logging the fetch results shows that the fetched HTML in SPA mode is a static page that I assume is hydrated later, so Vitest cannot match the word "homepage" in it. How can I unit test the fully hydrated page?
I have tried using mountSuspended from the docs, but now it seems to error because of the I18n module I'm using with Nuxt
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
SyntaxError: Need to install with `app.use` function
❯ Module.createCompileError node_modules/@intlify/message-compiler/dist/message-compiler.mjs:78:19
76| : code;
77| const error = new SyntaxError(String(msg));
78| error.code = code;
| ^
79| if (loc) {
80| error.location = loc;
❯ createI18nError node_modules/vue-i18n/dist/vue-i18n.mjs:105:34
❯ Module.useI18n node_modules/vue-i18n/dist/vue-i18n.mjs:2316:15
❯ setup pages/index.vue:18:39
❯ wrappedSetup node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:93:26
❯ clonedComponent.setup node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:141:48
❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:193:18
❯ setupStatefulComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7553:25
❯ setupComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7514:36
❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5843:7