如何在 Jest 中测试 VueJS (Nuxt) Store
How to test a VueJS (Nuxt) Store in Jest
我有一个 Jest 测试正在测试我的 VueJs 组件(特别是 Nuxt,但对此并不重要)。我正在尝试模拟一个 JSON 对象的商店。我一辈子都想不出如何测试这个。当我 运行 我的测试时,我不断收到的错误是“无法读取未定义的 属性 'easg_logo'”。
我的 Vue 组件 (footer.vue)
<template>
<div>
<v-img
:height="easg_logo_height"
:src="$store.state.app.easg_logo.src"
:width="easg_logo_width"
contain
/>
<v-img
:height="oma_logo_height"
:src="$store.state.app.oma_logo.src"
:width="oma_logo_width"
contain
/>
</div>
</template>
<script>
export default {
data(){
easg_logo_width: this.$store.state.app.easg_logo.top.width,
easg_logo_height: this.$store.state.app.easg_logo.top.height,
oma_logo_width: this.$store.state.app.oma_logo.top.width,
oma_logo_width: this.$store.state.app.oma_logo.top.width,
}
}
</script>
我的测试(footer.test.js)
import {shallowMount, createLocalVue} from '@vue/test-utils'
import Vuex from 'vuex';
import Footer from '@components/layouts/default/footer'
import Vuetify from 'vuetify';
const vuetify = new Vuetify();
const localVue = createLocalVue();
localVue.use(Vuex);
describe("Footer tests", ()=> {
let wrapper;
let store;
let state;
beforeEach(() => {
state= {
app: {
easg_logo:{
src: "~/assets/images/easg.jpg",
text: "EASG",
top:{
height: 72,
width: 82
}
},
oma_logo:{
src: "~/assets/images/oma.jpg",
text: "OMA",
top:{
height: 72,
width: 82
}
}
}
}
store = new Vuex.Store({
modules:{
state
}
})
})
test('store test', ()=> {
wrapper = shallowMount(Footer, {store, localVue, vuetify})
console.log(wrapper)
const a = 'a'
expect(a).toBe('a')
});
});
没有状态,因为 state
被错误地提供为模块。
应该是:
store = new Vuex.Store({
state
})
我有一个 Jest 测试正在测试我的 VueJs 组件(特别是 Nuxt,但对此并不重要)。我正在尝试模拟一个 JSON 对象的商店。我一辈子都想不出如何测试这个。当我 运行 我的测试时,我不断收到的错误是“无法读取未定义的 属性 'easg_logo'”。
我的 Vue 组件 (footer.vue)
<template>
<div>
<v-img
:height="easg_logo_height"
:src="$store.state.app.easg_logo.src"
:width="easg_logo_width"
contain
/>
<v-img
:height="oma_logo_height"
:src="$store.state.app.oma_logo.src"
:width="oma_logo_width"
contain
/>
</div>
</template>
<script>
export default {
data(){
easg_logo_width: this.$store.state.app.easg_logo.top.width,
easg_logo_height: this.$store.state.app.easg_logo.top.height,
oma_logo_width: this.$store.state.app.oma_logo.top.width,
oma_logo_width: this.$store.state.app.oma_logo.top.width,
}
}
</script>
我的测试(footer.test.js)
import {shallowMount, createLocalVue} from '@vue/test-utils'
import Vuex from 'vuex';
import Footer from '@components/layouts/default/footer'
import Vuetify from 'vuetify';
const vuetify = new Vuetify();
const localVue = createLocalVue();
localVue.use(Vuex);
describe("Footer tests", ()=> {
let wrapper;
let store;
let state;
beforeEach(() => {
state= {
app: {
easg_logo:{
src: "~/assets/images/easg.jpg",
text: "EASG",
top:{
height: 72,
width: 82
}
},
oma_logo:{
src: "~/assets/images/oma.jpg",
text: "OMA",
top:{
height: 72,
width: 82
}
}
}
}
store = new Vuex.Store({
modules:{
state
}
})
})
test('store test', ()=> {
wrapper = shallowMount(Footer, {store, localVue, vuetify})
console.log(wrapper)
const a = 'a'
expect(a).toBe('a')
});
});
没有状态,因为 state
被错误地提供为模块。
应该是:
store = new Vuex.Store({
state
})