详解Jest结合Vue-test-utils使用的初步实践(14)

日期：2020-05-11 栏目：程序人生 浏览：次

如果没有使用MockJS，那么都需要我们提供数据，就需要在afterEach中提供mounted时需要的数据：

beforeEach(() = > {
 jest.restoreAllMocks();
 const mockResult = [{ name: 1}, {name: 2}];
 helper.forData = jest.fn(() = > (Promise.resolve(mockResult)));
 wrapper = shallow(Test7);
});

这样处理过后，运行用例通过，并且控制台也不会报错了。

如果是在同一个方法中遇到了需要不同返回结果的forData，比如下面的getQuestion方法:

async getQuestion() {
 const r1 = await forData(axios.get('result1.do'));
 const r2 = await forData(axios.get('result2.do'));
 const res = r1 + r2;
 switch (res) {
  case 2:
   {
    this.result = '222';
    break
   }
  case 3:
   {
    this.result = '333';
    break
   }
 }
},

通过forData发出了两个不同的HTTP请求，返回结果不同，这时我们在测试时就需要使用mockImplementationOnce方法，这个方法mock的函数只被调用一次，多次调用时就会根据定义时的顺序依次调用mock函数，所以测试用例如下：

it('test for getQuestion', async() = > {
 // 设定forData返回值
 const mockFn = jest.fn()
  .mockImplementationOnce(() = > (Promise.resolve(1)))
  .mockImplementationOnce(() = > (Promise.resolve(2)));
 helper.forData = mockFn;
 // 执行
 await wrapper.vm.getQuestion();
 // 断言
 expect(mockFn).toHaveBeenCalledTimes(2);
 expect(wrapper.vm.result).toBe('333')
});

测试用例通过，并且控制台无报错。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。