Open
Description
Subject of the issue
SetTimeout are not run in watchers
Steps to reproduce
Here is a simple component and simple test:
ComponentTest.vue
<template>
<input v-model="value" type="text">
</template>
<script>
export default {
name: 'ComponentTest',
data() {
return {
value: '',
valueHasChanged: false
};
},
watch: {
value() {
console.log('value has changed');
setTimeout(() => {
console.log('timeout in watcher');
this.valueHasChanged = true;
}, 0);
}
},
created() {
setTimeout(() => {
console.log('timeout in created method');
}, 2000);
this.$watch('value', () => {
setTimeout(() => {
console.log('timeout in created method in $watch');
this.valueHasChanged = true;
}, 0);
});
}
};
</script>ComponentTest.spec.ts
import { shallowMount } from '@vue/test-utils';
import ComponentTest from './ComponentTest.vue';
beforeEach(() => {
jest.useFakeTimers();
});
describe('ComponentTest', () => {
it('should test', () => {
const wrapper: any = shallowMount(ComponentTest, {});
wrapper.vm.value = 'test';
wrapper.vm.value = 'test1';
jest.advanceTimersByTime(100000);
expect(wrapper.vm.valueHasChanged).toBe(true);
});
});Expected behaviour
Test should pass.
We should see in the console:
timeout in created method
value has changed
timeout in watcher
timeout in created method in $watch
Actual behaviour
Test fails.
And we see in console:
timeout in created method
value has changed
Possible Solution
This bug happened when I upgraded version of vue-test-utils, from 1.0.0-beta.29 to 1.0.0-beta.30, and still exists in latest version 1.1.2