Closed
Description
Version
1.0.0-beta.15
Reproduction link
https://github.com/bponomarenko/vue-test-utils-issue
Steps to reproduce
Clone repository. Then run:
npm install
npm run test
What is expected?
All unit tests pass.
Component:
<template>
<div id="app">
{{ stringified }}
</div>
</template>
<script>
export default {
props: {
collection: {
type: Array,
default: () => [],
}
},
data: () => ({
data: ''
}),
computed: {
stringified() {
return this.collection.join(',');
}
},
watch: {
collection: 'execute',
},
methods: {
execute() {
this.data = this.stringified;
}
}
}
</script>
Test:
import { shallow } from '@vue/test-utils'
import App from '@/App.vue'
describe('App.vue', () => {
it('renders props.msg when passed', () => {
const wrapper = shallow(App);
expect(wrapper.vm.stringified).toEqual('');
expect(wrapper.vm.data).toEqual('');
wrapper.setProps({ collection: [1, 2, 3] });
expect(wrapper.vm.stringified).toEqual('1,2,3');
expect(wrapper.vm.data).toEqual('1,2,3');
wrapper.vm.collection.push(4, 5);
expect(wrapper.vm.stringified).toEqual('1,2,3,4,5');
expect(wrapper.vm.data).toEqual('1,2,3,4,5');
});
});
It is expected, that computed property will be updated as soon as collection property changed.
What is actually happening?
Computed property is not updated.
When component is rendered on the page – computed property is properly updated on "collection" property mutation.
Might be related to previously fixed #502