<multiselect
v-model="subdivision"
:options="options"
:multiple="false"
:close-on-select="true"
:clear-on-select="false"
:preserve-search="false"
placeholder="Please select"
label="name"
track-by="name"
:preselect-first="false"
selectedLabel="✓"
deselectLabel="×"
selectLabel=" "
ref="myMultiselect"
id="multiselectId"
></multiselect>
computed: {
subdivision: {
set(value) {
this.$store.dispatch("subdivision", value);
},
get(value) {
return this.$store.state.subdivision;
}
}
}
那是测试:
describe('Value change of subdivision', () => {
let multiselect;
let cmp2;
let actions;
let mutations;
let state;
let getters;
beforeEach(() => {
actions = {
subdivision: jest.fn()
};
state = storeConfig.state;
mutations = storeConfig.mutations;
getters = storeConfig.getters;
store = new Vuex.Store({ state, getters, mutations, actions });
cmp2 = shallowMount(MyComponent, {
store,
localVue,
router
});
})
it('Select value should dispatch action', () => {
let multiselect = cmp2.find({ ref: 'myMultiselect' });
multiselect.trigger('input',subdivisions[1]);
expect(actions.subdivision).toHaveBeenCalled();
})
})
它不起作用。 我收到以下错误。
expect(jest.fn()).toHaveBeenCalled()
Expected mock function to have been called.
怎么了? 请帮忙。
答案 0 :(得分:0)
问题在于未触发输入事件。 输入的事件是组件自定义事件,这就是为什么触发器不起作用的原因。
multiselect.trigger('input',subdivisions[1]); // <-- wrong
使用v-model在vue-multiselect上触发事件的正确方法如下:
multiselect = wrapper.find({ ref: 'myMultiselect' });
let obj = { value: 12122, name: 'Hans Peter' };
multiselect.vm.$emit('input', obj );