VueJS - Unit testing with vue-test-utils gives error - TypeError: _vm.$t is not a function

你离开我真会死。 提交于 2019-12-04 07:46:55

The error isn't in the <style> tag because Jest will compile your Vue component and extract the JS code. So you can ignore the line error for now (I'm not sure how to fix it).

But based on your error message, the problem seems to be related to the use of vue i18n and you're missing it when declaring your Vue component in the test file. Try adding these lines to your test file:

import i18n from 'path-to-your-i18n-file'

// ...

cmp = shallow(SignupLayout, {
  store,
  localVue,
  propsData: {
      title: ['Login']
  },
  data: {
      email: 'abc@dsf.com'
  },
  i18n // <- add the i18n object here
})
const $t = () => {}

shallow(Component, {
 mocks:{ $t }
})

This way you dont have to load the whole i18n library. You can even spy on the function with Sinon or jest.fn() if using Jest.

Another way to mock the i18n library is mock it in a separate js file

import VueTestUtils from '@vue/test-utils';
VueTestUtils.config.mocks.$t = key => key;

and add it in Jest configuration

 "setupFiles": ["<rootDir>/setup.js"]

so if you have more components with resource imports you don't need to mock it separately.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!