How to stub vue-i18n within vue-test-utils

See original GitHub issue

I’m trying to write a test for page that uses vue-i18n plugin. @eddyerburgh has show how to test with mocked plugin. https://github.com/kazupon/vue-i18n/issues/198#issuecomment-316692326 This works fine.

However in some tests I do not care about translations. Instead mocking translations, I’d like to stub them. What ever I do i get [Vue warn]: Error in render: "TypeError: _vm.$t is not a function".

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:36 (8 by maintainers)

github_iconTop GitHub Comments

73reactions
lmiller1990commented, Apr 15, 2018

Hi @Mrkisha , I work on test utils a lot, and use i18n in my apps. You can just do

const wrapper = shallow(MyComponent, {
  mocks: {
    $t: () => {}
  }
})

and you should be fine, no warning.

If you want something to show you can do

const wrapper = shallow(MyComponent, {
  mocks: {
    $t: () => 'some specific text'
  }
})
31reactions
VictorCazanavecommented, May 21, 2018

@lmiller1990 Thanks for the new tip! However I think you made a typo in your example, it should be:

VueTestUtils.config.mocks["$t"] = () => {}

Sometimes it’s useful to check which wording is displayed (like for an error message), so in my projects I use:

VueTestUtils.config.mocks.$t = key => key
Read more comments on GitHub >

github_iconTop Results From Across the Web

Best way to mock/stub vue-i18n translations in a vue3 ...
What is the proper way to stub/mock t from import { useI18n } from 'vue-i18n' when writing tests using the vitest library? Note...
Read more >
Mocking global objects - Vue Testing Handbook
vue -test-utils provides a simple way to mock global objects attached to Vue.prototype , both on test by test basis and to set...
Read more >
Testing Vue Translations - Admin Hacks
Writing tests is always a good idea. Adding unit tests to an application which uses Vue-i18n is not difficult. Here are some test...
Read more >
Top 5 @vue/test-utils Code Examples - Snyk
To help you get started, we've selected a few @vue/test-utils examples, based on popular ways it is used in public projects. Secure your...
Read more >
Vue-i18n in integration / component test ( Jest ) - Get Help
Only all my date values are not formatted by $d(…). This is my setup and my test: TestUtils.js import { createLocalVue } from...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found