Jest 测试 Vue 应用，如何 mock 依赖？
在前端开发中，我们经常需要进行单元测试，而 Jest 作为一个流行的测试框架，鲜有人不知道。而在 Vue 应用中，我们经常需要使用到一些依赖，例如 Vuex 或者 Axios 等，这时候我们就需要用到 Jest 模拟这些依赖来进行测试。
下面，我们就来详细了解一下如何在 Jest 中 mock Vue 依赖。
- Mock Vuex
我们首先来看如何在 Jest 中 mock Vuex。在 Vue 中，我们经常使用 Vuex 来进行状态管理，而在测试中，我们理所当然需要模拟这个依赖。
首先，我们需要使用 Jest 提供的 jest.mock 方法来模拟 Vuex。
jest.mock('vuex', () => ({ Store: jest.fn(() => ({ dispatch: jest.fn(), commit: jest.fn(), getters: {}, state: {} })) }));
在上面的代码中，我们使用 jest.fn 来模拟 Store 实例，同时使用 dispatch、commit 两个方法的 jest.fn 来模拟这些方法，getters 和 state 也都被 mock 为空对象。
对于 Vuex 中的 getter 和 action 等，我们可以在测试中直接使用 jest.fn 来定义所需要的函数。
-- -------------------- ---- ------- ----- ------- - - ----- -- -- -- ----- --------- ---- -- -- - ----- ------- - - ---------- --------- -展开代码
- Mock Axios
接下来，我们来看如何在 Jest 中 mock Axios。在 Vue 中，我们经常使用 Axios 来进行网络请求，而在测试中，我们需要模拟这个依赖。
首先，我们还是需要使用 jest.mock 方法来模拟 Axios。
jest.mock('axios', () => ({ get: jest.fn(() => Promise.resolve({data: 'response'})) }));
在上面的代码中，我们使用 jest.fn 来模拟 Axios 的 get 方法，并返回一个 Promise.resolve 包含 data 属性的对象。
对于 axios 的 post 等其他方法，我们也可以通过类似的方式进行 mock。
axios.post = jest.fn(() => Promise.resolve({ data: 'response' }))
- 另外一些 mock 方法
在 Jest 中，我们还可以使用一些其他的 mock 方法来模拟依赖，例如：
- jest.spyOn：用于监控对象的方法调用，例如用于检查 Vuex 中的 action 是否被调用。
- jest.fn：用于模拟一个空函数。
- jest.mockImplementation：用于模拟一个函数的具体实现，例如模拟一个函数返回指定的值。
下面是一个具体的例子，我们来模拟一个函数，该函数返回传入的两个数的和。
-- -------------------- ---- ------- -------- ------ -- - ------ - - -- - ----- ------- - ----------- -- -- - ------ - - - - -- --- -------------------------- ---------- ----- -- -- - ----------------- ------------ ----------------------------------- --展开代码
在上面的代码中，我们使用 jest.fn 方法来模拟一个函数 mockSum，并使用 mockReturnValue 设定该函数返回固定的值。当执行 expect(mockSum(1, 2)) 时，该语句返回值为 3，符合预期，同时该函数的调用加 1 的操作也被执行。
综上所述，我们在 Jest 中 mock 依赖，可以使用 jest.mock 方法，同时根据具体的依赖使用不同的 mock 方法来进行实现。通过 mock 依赖，我们可以更好地进行单元测试，并更好地保证代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b81bcb306f20b3a659d449
