VueJS - 使用 vue-test-utils 进行单元测试给出错误 - TypeError: _vm.$t 不是函数

2024-01-04

对于 Vuejs 来说相对较新并正在测试其组件。使用 vue-test-utils 和 jest 进行测试。出现以下错误test log https://i.stack.imgur.com/rQejp.jpg

.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: '[email protected] /cdn-cgi/l/email-protection'
        }
 
        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: '[email protected] /cdn-cgi/l/email-protection'
            }
        })
        cmp.update()
        expect(cmp.vm.title).toEqual(['Login'])
    })


})

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


const $t = () => {}

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VueJS - 使用 vue-test-utils 进行单元测试给出错误 - TypeError: _vm.$t 不是函数 的相关文章

随机推荐