CODEWITHSUNDEEP
vue.jsvue-test-utils
duduwe
duduwe

Reputation: 1270

How to mock i18n of a component

I am using a 3rd party vue component SomeComponent that implements its own translations.

This is my mount in my test

import { mount } from '@vue/test-utils';
import { SomeComponent } from '../../some-component'
import { createI18n } from 'vue-i18n'
import lang from '../../lang/en'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true,
  messages: lang,
})

const items = [{ home: 'Home', about: 'About' }]

const wrapper = mount(MyComponent, {
        global: {
          plugins: [i18n],
          components: {
            SomeComponent,
          },
        },
        props: {
          items,
        },
      })

But I get this error

TypeError: Cannot read properties of undefined (reading 't')

How can I properly mount SomeComponent without mocking SomeComponent itself and resolve the undefined t error?

Upvotes: 2

Views: 107

Answers (1)

duduwe
duduwe

Reputation: 1270

The library where the SomeComponent belongs to exposes a setup function where i18n instance needs to be passed. It has to be called prior to mounting SomeComponent. This could have been easier to debug if there was a proper error message, but there's none.

Upvotes: 0

Related Questions