I have implemented a button on the page that increments a counter when clicked:
<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>
However, my unit test is failing to detect the change in the count after clicking the button. Is there an error in my unit test causing it to report the wrong result?
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');
});
});
Error message:
AssertionError: expected '10' to equal '11'