开始学习vuejs和jest如何工作。观看了一些视频,然后开始尝试自己,但不断失败的触发点击。
我在我的组件中有一个登录按钮,这是我在组件中拥有的唯一的v-btn
<v-card-actions>
<v-btn
block
:disabled="!valid"
color="info"
class="mr-4"
@click.native="on_login"
>
Login
</v-btn>
</v-card-actions>
在我的login.spec.js中
import { mount, shallowMount } from '@vue/test-utils';
import Login from "@/views/Login";
import { createLocalVue } from '@vue/test-utils'
import Vuetify from "vuetify";
const localVue = createLocalVue()
localVue.use(Vuetify);
describe('Login.vue', () => {
it('contain login', () => {
const wrapper = mount(Login);
expect(wrapper.html()).toContain('login');
});
it('login event', async () => {
const wrapper = mount(Login, {
localVue
});
const spy_on_login = jest.spyOn(wrapper.vm, 'on_login');
const button = wrapper.find('.v-btn');
expect(button.exists()).toBeTruthy();
await button.trigger('click'); // also tried click.native
// I even tried using wrapper.vm.nexttick, vue.nexttick but none worked
expect(spy_on_login).toHaveBeenCalled();
});
});
我没有首先添加localvue和vuetify,因为vuetify实际上在 test/unit/setup.js
作为一个新手,我不确定从哪里开始调试原因触发器不工作,因为按钮确实存在
提前感谢您的建议,我阅读了一些stackoverflow并尝试了它们的方法,但没有一个有效:(
1条答案
按热度按时间yqkkidmi1#
从…起
vue-test-utils
文档:trigger
仅适用于本机dom事件。要发出自定义事件,请使用“wrapper.vm.$emit('mycustomevent'))``来源: Package 器#触发器
因为
v-btn
是自定义组件,可能不是本机按钮元素,您应该尝试使用button.vm.$emit('click')
.