vuetify jest按钮触发器即使与spy一起使用也不起作用

rsl1atfo  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(461)

开始学习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并尝试了它们的方法,但没有一个有效:(

yqkkidmi

yqkkidmi1#

从…起 vue-test-utils 文档: trigger 仅适用于本机dom事件。要发出自定义事件,请使用“wrapper.vm.$emit('mycustomevent'))``
来源: Package 器#触发器
因为 v-btn 是自定义组件,可能不是本机按钮元素,您应该尝试使用 button.vm.$emit('click') .

相关问题