How to mock i18n of a component

Question

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?

" implements its own translations" - in which way? Are you certain that it uses the same vue-i18n instance as you provide? Please, show code that throws the error. If it's public then consider explaining what SomeComponent really is, so it could be examined. There could be a problem with methodology. If this is unit test, you're supposed to mock anything but tested component (MyComponent), so you wouldn't have this problem. For integration/e2e that involve third-party components the environment would be less fragile and error-prone, so there are less reasons to do this with vue/test-utils — Estus Flask
– Estus Flask, Commented Sep 3, 2024 at 11:45
@EstusFlask, to simplify, I just said that it's a 3rd party component. It's actually a component in a library/package w/in the organization built by another team. I can't change it, but I have a read-only access to it & is indeed using i18n mostly used for validation msgs, default labels and titles. I FIGURED it out already. It exposes an API/function where I pass my components i18n instance. Never had encountered a library component before that does this, so it never occurred to me that it needs the consumer's i18n instance. The authors could have thrown an error with some hint sigh — duduwe
– duduwe, Commented Sep 3, 2024 at 18:32
So it uses the same vue-i18n as in your project (the package is not duped) but creates its own createI18n instance? Makes some sense but not a conventional thing to do — Estus Flask
– Estus Flask, Commented Sep 3, 2024 at 18:55
@EstusFlask, the vue-i18n's version in MyComponent and SomeComponent could possibly be different, so I bet things can fail if they are not compatible. SomeComponent does not create its own instance, hence the issue above TypeError: Cannot read properties of undefined (reading 't'). It needs MyComponent's i18n instance. — duduwe
– duduwe, Commented Sep 3, 2024 at 23:11

duduwe · Accepted Answer · 2024-09-03 18:38:43Z

0

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.

answered Sep 3, 2024 at 18:38

duduwe

1,32214 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to mock i18n of a component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related