javascript - 如何对依赖于复杂 Vuex 存储并扩展另一个组件的 Vue.js 组件进行单元测试?
问题描述
我想知道如何对使用复杂的 Vuex 存储并扩展另一个组件的组件进行单元测试。
有人可以为我提供一个示例,说明我如何创建一个测试,该测试简单地断言一个扩展另一个组件并依赖于 Vuex 的组件安装并显示一些简单的文本?
我已经尝试使用vue-test-utils
被测shallowMount
组件,但我不能让我的测试失败,因为它甚至在构建和安装组件时也存在问题。据我所知,这是组件利用了扩展组件的结果,因为这两个组件都依赖于复杂的 Vuex 存储。
任何类型的例子都将不胜感激。谢谢。
编辑:
对于进一步的上下文,我们的商店被分解成模块。商店定义文件如下所示:
/* global phpvars */
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'
import acloverrides from '../../modules/acloverrides'
import api from '../../modules/api'
import callback from '../../modules/callback'
import clearlink from '../../modules/clearlink'
import configuration from '../../modules/configuration'
import customer from '../../modules/customer'
import drKeepAlive from '../../modules/drkeepalive'
import interaction from './modules/interaction'
import ivr from './modules/ivr'
import marketing from '../../modules/marketing'
import opportunities from './modules/opportunities'
import order from '../../modules/order'
import orderNotes from './modules/notes'
import products from '../../modules/products'
import sidebar from './modules/sidebar'
import sparks from './modules/sparks'
import training from '../../modules/training'
import transformers from '../../modules/transformers'
import user from '../../modules/user'
let brand = require('../brands/' + phpvars.brand.name + '/modules/brand').default
let forms = require('../brands/' + phpvars.brand.name + '/modules/forms').default
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
acloverrides,
api,
brand,
callback,
clearlink,
configuration,
customer,
drKeepAlive,
forms,
interaction,
ivr,
marketing,
opportunities,
order,
orderNotes,
products,
sidebar,
sparks,
training,
transformers,
user
},
state: {
availability: {
status: false,
results: {}
},
navigation: {
enabled: phpvars.user.access.order.navigate,
restrictTo: []
},
routes: [],
router: {},
editMode: false // Used to determine if the user has clicked the edit button on an existing order.
},
actions,
getters,
mutations
})
这是我的单元测试文件:
import Vuex from 'vuex'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import SelectedProducts from '../../resources/assets/js/components/formfields/products/SelectedProducts'
import BaseField from '../../resources/assets/js/components/BaseField'
import store from '../../resources/assets/js/orderform/store/index.js'
const Vue = createLocalVue()
Vue.use(Vuex)
describe('SelectedProducts', () => {
fit('sanity check', () => {
window.phpvars = {
brand: {
name: 'foobar'
},
user: {
access: {
order: {
navigate: true
}
}
}
}
const wrapper = shallowMount(SelectedProducts, {
store: new Vuex.Store(store)
})
expect(wrapper.text()).toContain('Selected Products')
})
})
解决方案
我发现关于单元测试的 Vue 文档有点含糊。试一试:
import {createLocalVue, shallowMount} from '@vue/test-utils';
import Vuex from 'vuex';
import store from 'path/to/store/index.js';
import Component from 'path/to/Component';
// create a local instance that uses
// the store, should follow a pattern present
// in your src/main.js
const localVue = createLocalVue();
localVue.use(Vuex);
describe(
'Component', () => {
test('renders', () => {
const wrapper = shallowMount(Component, {
store: new Vuex.Store(store)
});
expect(wrapper.isVueInstance()).toStrictEqual(true);
});
}
);
编辑您的编辑
在 Jest 中,window
替换为global
. 所以你可以模拟你phpvars
的:
global.phpvars = {
brand: {
name: 'foobar'
},
user: {
access: {
order: {
navigate: true
}
}
}
};
您需要在导入商店之前放置它。
扩展其他组件的组件不应进行任何不同的测试,它们本质上根据变量和要求编译为单个组件。如果您可以扩展该问题,我很乐意回答(例如,您遇到的扩展组件特有的问题或错误)。
我还没有测试过我提到的任何东西,所以如果你仍然有错误,我会拼凑一个项目。祝你好运!
推荐阅读
- django - Django - 折扣不再有效后如何显示特定文本
- python - 与在线资源相比,Python 抄袭检查文本
- android - 为什么它在 Kotlin 中抱怨“声明已从平台调用中推断出类型”?
- excel - VBA为列中的每个单元格添加超链接功能
- excel - Office365 Excel - 如果 Workbook.close 不起作用,如何关闭窗口?
- javascript - 在谷歌云存储中获取/设置元数据 - node.js
- java - 为 HashMap selenium java 收集数据-xpath 可能是什么?
- python - 如何使用带有字节而不是文件的python子进程
- sql - SQL查询以将数据提取为转置形式
- grafana - 在 grafana 中管理查询结果