我们现在要做的就是mock掉外部依赖。Jest提供了一个很好的mock系统，让我们能够很轻易的mock所有依赖，前面我们用过jest.spyOn方法和jest.fn方法，但对于上面的例子来说，仅使用这两个方法是不够的。
我们现在要mock掉整个axios模块，使用的方法是jest.mock，就可以mock掉依赖的模块。
jest.mock('dependency-path', implementationFunction)
在Test3.spec.js中，首先将axios中的get方法替换为我们的mock函数，然后引入相应的模块
jest.mock('axios', () => ({
get: jest.fn()
}));
import { shallow } from 'vue-test-utils';
import Test3 from '@/components/Test3';
import axios from 'axios';
然后测试点击按钮后，axios的get方法是否被调用：
describe('Test for Test3 Component', () => {
let wrapper;
beforeEach(() => {
axios.get.mockClear();
wrapper = shallow(Test3);
});
afterEach(() = > {
wrapper.destroy()
});
// 点击按钮后调用了 getAnswer 方法
it('getAnswer Fn should be called', () => {
const mockFn = jest.fn();
wrapper.setMethods({getAnswer: mockFn});
wrapper.find('button').trigger('click');
expect(mockFn).toBeCalled();
});
// 点击按钮后调用了axios.get方法
it('axios.get Fn should be called', () => {
const URL = 'https://yesno.wtf/api';
wrapper.find('button').trigger('click');
expect(axios.get).toBeCalledWith(URL)
});
});
测试结果发现，虽然我们的mock函数被调用了，但是控制台还是报错了，原因是我们mock的axios.get方法虽然被调用了，但是并没有返回任何值，所以报错了，所以下一步我们要给get方法返回一个Promise，查看方法能否正确处理我们返回的数据
jest.fn()接受一个工厂函数作为参数，这样就可以定义其返回值
const mockData = {
data: {
answer: 'mock_yes',
image: 'mock.png'
}
};
jest.mock('axios', () => ({
get: jest.fn(() => Promise.resolve(mockData))
}));
getAnswer是一个异步请求，Jest提供的解决异步代码测试的方法有以下三种：
- 回调函数中使用done()参数
- Pomise
- Aysnc/Await
第一种是使用在异步请求的回调函数中使用Jest提供的叫做done的单参数，Jest会等到done()执行结束后才会结束测试。
我们使用第二种和第三种方法来测试getAnswer方法的返回值，前提就是在方法中返回一个Promise。（一般来说，在被测试的方法中给出一个返回值会让测试更加容易）。 Jest会等待Promise解析完成。 如果承诺被拒绝，则测试将自动失败。
// axios.get方法返回值（Promise）
it('Calls get promise result', () = > {
return expect(wrapper.vm.getAnswer()).resolves.toEqual(mockData);
});
内容版权声明：除非注明，否则皆为本站原创文章。