观察者中的setTimeout未与vue测试实用程序一起运行

Question

我有一个非常简单的组件来解释我的问题。当我在观察者中使用setTimeout时，测试并没有按预期运行。

组件测试.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);
});
});

valueHasChanged状态在测试中不会改变，即使我使用了假计时器。我没有看到任何控制台日志是内部观察者。

这是vue-test-utils(或笑话(中的一个bug，还是我遗漏了什么？

Answer 1

wrapper.vm.value = 'test';
wrapper.vm.value = 'test1';

您必须更改代码的这一部分。使用vue test utils提供的API，而不是像您所做的那样更新数据属性。

这些线路可以替换为，

await wrapper.setData({ value: 'test' });
await wrapper.setData({ value: 'test1' });

API参考-https://next.vue-test-utils.vuejs.org/api/#setdata