VueJS-使用vue-test-utils进行单元测试会产生错误-TypeError:_vm.$ t不是函数 [英] VueJS - Unit testing with vue-test-utils gives error - TypeError: _vm.$t is not a function

问题描述

Vuejs相对较新，并测试其组件.使用vue-test-utils和jest进行测试.出现以下错误 测试日志

Relatively new to Vuejs and testing its components. Using vue-test-utils and jest for testing. Getting following error test log

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

The .vue file consists of template, component and styling. Below is the part of the SignupLayout.vue that gets error -

<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: '[e-mail]'
        }
 
        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: '[e-mail]'
            }
        })
        cmp.update()
        expect(cmp.vm.title).toEqual(['Login'])
    })


})

对于$ t与sass有什么关系感到困惑.任何帮助，将不胜感激.现在在这里停留了一段时间. 让我知道是否需要更多详细信息.预先感谢

Confused as to what has $t got to do with sass. Any help would be appreciated. Stuck here for a while now. Let me know if more details needed. Thanks in advance

推荐答案

该错误不在<style>标记中，因为Jest将编译您的Vue组件并提取JS代码.因此，您现在可以忽略行错误(我不确定如何解决).

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

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

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: '[e-mail]'
  },
  i18n // <- add the i18n object here
})

这篇关于VueJS-使用vue-test-utils进行单元测试会产生错误-TypeError:_vm.$ t不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！