vue 单元测试 vue-test-utils 异步问题

Question

在做单元测试时, 测试用例里面触发一个点击事件. 组件中这个事件时异步的. 成功之后赋值一个参数. 问题来了 我按照官网的写一个promise 如果直接res没问题. 如果延迟1s执行. 这个测试就通不过.

或者说 这种情况应该有正确姿势. 求指导

错误信息

Answer 1

执行顺序有问题吧

Answer 2

官方文档里有说明了， 是执行顺序问题，setTimeout是宏任务，而warper.vm.$nextTick是微任务，会在宏任务之前执行，故测试不通过，可以把list方法里的setTimeout去掉，直接resolve结果试试，就会通过测试了 https://v1.test-utils.vuejs.o...

Answer 3

Jest提供了相关的方法，我们需要使用的是jest.useFakeTimers()和jest.runAllTimers()
代码开始增加jest.useFakeTimers()，在触发click执行后，方法后通过jest.runAllTimers()触发macor-task任务

jest.useFakeTimers();

describe('组测试', () => {

  it('测试异步', (done) => {
    const wrapper = shallowMount(Home as any);
    wrapper.find('#button1').trigger('click');
    jest.runAllTimers();
    wrapper.vm.$nextTick(async () => { 
      await flushPromises();
      expect(wrapper.find('#num').text()).toBe('1');
      done();
    })
  });

});