VueJS - 使用 vue-test-utils 进行单元测试会出错 - TypeError: _vm.$t is not a function答案

【问题标题】：VueJS - Unit testing with vue-test-utils gives error - TypeError: _vm.$t is not a functionVueJS - 使用 vue-test-utils 进行单元测试会出错 - TypeError: _vm.$t is not a function
【发布时间】：2018-07-25 04:39:31
【问题描述】：

相对较新的 Vuejs 和测试它的组件。使用 vue-test-utils 和 jest 进行测试。收到以下错误 test log

.vue 文件由模板、组件和样式组成。以下是出现错误的 SignupLayout.vue 部分 -

<style lang="sass">
@import '../stylesheets/colors'
html[path="/signup"], html[path="/login"]
  height: 100%
  background-image: url("../assets/background.jpg")
  background-size: cover
  background-position: center
  background-repeat: no-repeat
  overflow: hidden

  #signup-layout
    #change-language-button
      .lang-menu
        color: $alto

</style>

测试文件 -

import Vue from 'vue';
import Vuex from 'vuex'
import SignupLayout from '../src/components/SignupLayout.vue';
import { mount, shallow, createLocalVue } from '@vue/test-utils';

const localVue = createLocalVue()

localVue.use(Vuex)

jest.resetModules()

describe('Signup.test.js', () => {
    let cmp
    let actions
    let store
    let getters
    let state

    beforeEach(() => {


        state = {
            email: 'abc@gmail.com'
        }
 
        getters = {
            CURRENT_USER_EMAIL: state => state.email
        }

        store = new Vuex.Store({
            getters
        })


    })

    it('has received ["Login"] as the title property', () => {
        cmp = shallow(SignupLayout, {
            store,
            localVue,
            propsData: {
                title: ['Login']
            },
            data: {
                email: 'abc@dsf.com'
            }
        })
        cmp.update()
        expect(cmp.vm.title).toEqual(['Login'])
    })


})

对于 $t 与 sass 有什么关系感到困惑。任何帮助，将不胜感激。现在在这里卡了一段时间。如果需要更多详细信息，请告诉我。提前致谢

【问题讨论】：

标签： vue.js sass jestjs babel-jest vue-test-utils

【解决方案1】：

const $t = () => {}

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

这样您就不必加载整个 i18n 库。如果使用 Jest，您甚至可以使用 Sinon 或 jest.fn() 来监视函数。

【讨论】：

+1 可以，谢谢。但是你能澄清一下你到底在做什么。 Аs 我知道你正在使 $t 成为箭头函数
在已挂载的测试组件的this 上下文中创建 $t 的模拟作为普通函数。

【解决方案2】：

错误不在<style> 标记中，因为 Jest 将编译您的 Vue 组件并提取 JS 代码。所以你现在可以忽略线路错误（我不知道如何修复它）。

但是根据您的错误消息，问题似乎与vue i18n 的使用有关，并且您在测试文件中声明 Vue 组件时缺少它。尝试将这些行添加到您的测试文件中：

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
})

【讨论】：

【解决方案3】：

模拟 i18n 库的另一种方法是在单独的 js 文件中模拟它

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

并将其添加到 Jest 配置中

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

因此，如果您有更多带有资源导入的组件，则无需单独模拟它。

【讨论】：

【解决方案4】：

目前在 Vue 3 中，您可以尝试，对我有帮助：

import { config } from '@vue/test-utils';

config.global.mocks.$t = phrase => phrase;

因为

config structure at the moment

【讨论】：