VueJS - Unit testing with vue-test-utils gives error - TypeError: _vm.$t is not a function
VueJS - Unit testing with vue-test-utils gives error - TypeError: _vm.$t is not a function
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 有什么关系感到困惑。任何帮助,将不胜感激。现在卡在这里一段时间了。
让我知道是否需要更多详细信息。提前致谢
错误不在 <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
})
const $t = () => {}
shallow(Component, {
mocks:{ $t }
})
这样您就不必加载整个 i18n 库。如果使用 Jest,您甚至可以使用 Sinon 或 jest.fn()
监视函数。
另一种模拟 i18n 库的方法是在单独的 js 文件中模拟它
import VueTestUtils from '@vue/test-utils';
VueTestUtils.config.mocks.$t = key => key;
并将其添加到 Jest 配置中
"setupFiles": ["<rootDir>/setup.js"]
所以如果你有更多的资源导入组件,你不需要单独模拟它。
目前在 Vue 3 中,您可以尝试,对我的情况有帮助:
import { config } from '@vue/test-utils';
config.global.mocks.$t = phrase => phrase;
因为
config structure at the moment
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 有什么关系感到困惑。任何帮助,将不胜感激。现在卡在这里一段时间了。 让我知道是否需要更多详细信息。提前致谢
错误不在 <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
})
const $t = () => {}
shallow(Component, {
mocks:{ $t }
})
这样您就不必加载整个 i18n 库。如果使用 Jest,您甚至可以使用 Sinon 或 jest.fn()
监视函数。
另一种模拟 i18n 库的方法是在单独的 js 文件中模拟它
import VueTestUtils from '@vue/test-utils';
VueTestUtils.config.mocks.$t = key => key;
并将其添加到 Jest 配置中
"setupFiles": ["<rootDir>/setup.js"]
所以如果你有更多的资源导入组件,你不需要单独模拟它。
目前在 Vue 3 中,您可以尝试,对我的情况有帮助:
import { config } from '@vue/test-utils';
config.global.mocks.$t = phrase => phrase;
因为
config structure at the moment