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

Question

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

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

Answer 1

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

trigger() 方法 returns 一个 Promise 在组件更新时解析，因此您可以进行测试回调 async，然后 await trigger() 调用：

it('test1:::', async () => {
   //...
   await wrapper.find('button').trigger('click');
   expect(wrapper.find('#count').text()).to.be.equal('11');
});

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

The function of the button is correct, but the unit test reports an error

javascript

vue.js

vuejs2

vue-test-utils