按钮的功能正确，但是单元测试报告错误

问题描述

我可以正常使用页面上的按钮：

<template>
    <div>
        <span id='count'>{{count}}</span>
        <button @click="increment">+</button>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                count: 10,}
        },methods: {
            increment() {
                this.count++;
            }
        }
    }
</script>

但是我的单元测试没有检测到按钮的效果。是因为我在单元测试中犯了一个错误，然后单击它来报告错误？

import { expect } from 'chai';
import { mount } from '@vue/test-utils';

import Counter from '@/components/Counter';

describe('test::::',() => {
    it('test1:::',() => {
        const wrapper = mount(Counter);
        expect(wrapper.find('#count').text()).to.be.equal('10');
        wrapper.find('button').trigger('click');
        expect(wrapper.find('#count').text()).to.be.equal('11');
    });
});

错误消息：

AssertionError: expected '10' to equal '11'

解决方法

问题在于断言发生在click处理程序的更改生效之前。

trigger()方法返回一个Promise来解析组件更新的时间，因此您可以进行测试回调async，然后进行await {{1} }通话：

trigger()