How to test/mock @nuxtjs/i18n?

[andorfermichael]

What's the best way to mock the i18n module?

I' am using:

"@testing-library/jest-dom": "5.14.1",
"@testing-library/vue": "5.8.2",
"vue-jest": "4.0.1"
"jest": "26.6.3"

I was previously using vue-i18n and now I switched to nuxt-i18n.

Currently my test looks as follows:

/**
 * @jest-environment jsdom
 */

import InfoBanner from '@/components/chatbot-view/info-banner.vue'
import ClientOnlyMock from '@/__tests__/objects/mocks/client-only-mock'
import { shallowMount, createLocalVue, config } from '@vue/test-utils'
import Vuex from 'vuex'
import VueI18n from 'vue-i18n'

const messages = {
    en: {
        'hello-world': {
            headline: 'Hello World!'
        }
    }
}

config.stubs['client-only'] = ClientOnlyMock

describe('info-banner.vue', () => {
    let store
    let NuxtStore
    let i18n

    const localVue = createLocalVue()
    localVue.use(Vuex)
    localVue.use(VueI18n)

    beforeAll(async () => {
        // note the store will mutate across tests
        const storePath = `${process.env.buildDir}/store.js`
        NuxtStore = await import(storePath)
    })

    beforeEach(async () => {
        store = await NuxtStore.createStore()

        i18n = new VueI18n({
            locale: 'en',
            fallbackLocale: 'en',
            messages
        })
    })

    test('includes "en" translations', () => {
        const wrapper = shallowMount(InfoBanner, {
            store,
            localVue,
            i18n
        })

        const strong = wrapper.findAll('strong').at(0)
        expect(strong.text()).toBe(`${messages.en['hello-world'].headline}:`)
    })
})

While using vue-i18n everything worked as expected, but since I switched the module it throws the following error:

ERROR in ./.nuxt/nuxt-i18n/middleware.js
Module not found: Error: Can't resolve '../middleware' in '/home/andorfermichael/Documents/software-projects/symptoma-nuxt/.nuxt/nuxt-i18n'
 @ ./.nuxt/nuxt-i18n/middleware.js 5:0-43 54:0-14
 @ ./.nuxt/nuxt-i18n/plugin.routing.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

ERROR in chunk app [initial]
c94d93e.js
/home/andorfermichael/Documents/software-projects/symptoma-nuxt/node_modules/@nuxt/webpack/node_modules/babel-loader/lib/index.js??ref--2-0!/home/andorfermichael/Documents/software-projects/symptoma-nuxt/.nuxt/client.js b99b9616542bc9ea64cff7a8ebd701fb
Assigning to rvalue (55:0)
| }();
| 
| !(function webpackMissingModule() { var e = new Error("Cannot find module '../middleware'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()).nuxti18n = i18nMiddleware;
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What has to be changed? Is there a better approach?

[rchl]

Sorry, don't have experience with such setup. Maybe try asking in Nuxt's Discord, in #testing?

If you create a minimal repro then if I have some time I might look at it.

[andorfermichael]

Thanks for your suggestion.

I have created a minimal repro.

Finding a solution would be great, because I suppose that other people also would like to be able to test @nuxtjs/i18n.

[rchl]

It can't find the middleware.js because middleware support is disabled in /__tests__/setup/jest.global.setup.js with:

    features: {
        // ...
        middleware: false,
    }

[andorfermichael]

@rchl

Thanks. I didn't recognize that.

However, now I have another issue.

The test suit recognizes this.$i18n.locales so that I can access locale.name or locale.code in the loop, but I cannot access $i18n.localeProperties such as $i18n.localeProperties.dir.

Do you have any idea?

[rchl]

@nuxtjs/i18n extends the $i18n instance with various additional properties. Since you are only initializing the instance of VueI18n in your tests those extra properties are not available.

There is no easy way to solve it. I guess you could create your own Vue plugin that extends the instance with those extra properties but there is nothing that the module exposes. The module is designed to do it from the Nuxt plugin's context.

I don't fully understand this testing methodology. You seem to be just mounting your component using shallowMount but you are still building your Nuxt app for some reason. I would think that you shouldn't need to build if you are just mounting individual components like that. Unless you are just preparing for some other testing approach.

And you could also look into more high-level testing like this module does. It just builds and starts the Nuxt instance and then makes a page request to it and tests the result. Of course this is not as low-level as testing on component level but at least doesn't have issues with having to mock everything.

[andorfermichael]

You are right. I will simplify my test setup now.