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

为了解决这个问题，我们需要在beforeEach（或afterEach）中，重置forData的状态，如果在代码中使用了MockJS的情况下，我们只需要让默认的forData获取的数据走原来的路径，由MockJS提供假数据即可，这样我们只需要在一代码的最开始将forData保存，在beforeEach使用restoreAllMocks方法重置状态，然后在恢复forData状态，然后每个用例中针对forData进行单独的mock即可

const test = helper.forData;
describe('Test for Test7 Component', () => {
 let wrapper;
 beforeEach(() => {
  jest.restoreAllMocks();
  helper.forData = test;
  wrapper = shallow(Test7);
 });
 afterEach(() => {
  wrapper.destroy()
 });
 // 用例不变

如果没有使用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')
});

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