观察者中的 setTimeout 不与 vue-test-utils 一起运行答案

【问题标题】：setTimeout in watchers not run with vue-test-utils观察者中的 setTimeout 不与 vue-test-utils 一起运行
【发布时间】：2021-04-14 02:12:41
【问题描述】：

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

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);
  });
});

valueHasChanged 状态在测试中不会改变，即使我使用了假计时器。而且我没有看到观察者内部的任何 console.log。

这是来自 vue-test-utils（或 jest）的错误，还是我遗漏了什么？

【问题讨论】：

标签： javascript vue.js jestjs vue-test-utils

【解决方案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

【讨论】：