vue 单元测试触发器（'click'）未触发

Question

我在我的 vue 项目中有一个看起来像这样的测试，

it('should close on dialog close click', async () => {
    wrapper = mountWith({open :true});
    wrapper.find('.c-dialog__close').trigger('click');
    await Vue.nextTick();
    console.log(wrapper.vm.open);
    expect(wrapper.vm.open).toBe(false);
});

我希望 wrapper.vm.open 在点击被触发时从 true 变为 false，但它保持为 false。在实际 UI 中，点击有效并且显示设置为 false，所以测试中一定有什么地方出错了？组件代码如下，

    <template>
    <!-- eslint-disable vue/no-v-html -->
    <div class="c-dialog" :class="{'u-block': show}" @triggerOpen="handleOpen">
        <div class="c-dialog__background" @click="handleClose">
            <div class="c-dialog__wrapper u-mt-4 u-mb-1">
                <div class="c-dialog__action u-flex">
                    <button class="c-dialog__close u-bg-denim-blue u-border-0 u-text-white" @click="handleClose()">Close</button>
                </div>
                <div class="c-dialog__main u-px-2 u-py-4 u-border u-bg-white">
                    <h4>{{ content.title }}</h4>
                    <div class="c-dialog__content u-mt-2" v-html="content.content" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

import Vue from 'vue';

export default Vue.extend({
    props: {
        content: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            show: false
        }
    },
    methods: {
        handleOpen() {
            this.show = true;
        },
        handleClose() {
            this.show = false;
        }
    }

});

</script>

Answer 1

您可能已经弄明白了，在您的组件中您有 'show'，但在您的测试中您期望 'open' 为真。

vue 单元测试触发器（'click'）未触发

vue unit test trigger('click') not firing

javascript

unit-testing

vue.js

jestjs