I have a test in my vue project that looks like this,

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);
});

I am expecting wrapper.vm.open to go from true to false when the click is triggered but it's staying as false. In the actual UI the click works and show gets set to false, so there must be something in the test that wrong? The component code is below,

    <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>

CodePudding user response：

You might have already figured it out, in your component you have 'show', but in your test you are expecting 'open' to be true.