使用 Jest 模拟在 vue 组件中导入的模块

Question

我在处理Jest的文档时遇到了一些问题，因为我希望这段代码可以工作：

import Vue from 'vue';
import Router from '@/router/index';
import OrdersService from '@/services/orders.service';

jest.mock('@/services/orders.service');

describe('OrdersItem.vue', () => {
  beforeEach(() => {
    // mockClear does not exist
    OrdersService.mockClear();
  });

  it('should render expected list contents', () => {
    // Orders.mock is undefined 
    OrdersService.getAll.mockResolvedValue([ ... ]);
    // ...

然而事实并非如此。 它失败了，就好像OrdersService从未被嘲笑过一样。 我也尝试过类似的东西：

jest.mock('@/services/orders.service', () => jest.fn());
jest.mock('@/services/orders.service', () => { getAll: jest.fn() });

第一个用模拟功能替换整个服务（我想实现文档中提到的自动模拟功能，其中所有原始方法都自动替换为模拟 fn）。 第二个失败的方式与仅使用模块路径的.mock调用相同。

我在这里做错了什么，为什么？

orders.service框架：

import axios from 'axios';
import config from '../config/config.json';
import Order from '../models/order';

class OrdersService {
  constructor(httpClient) {
    this.httpClient = httpClient;
  }

  getAll() {
      // ...
  }
}
export default new OrdersService(axios);

Answer 1

看起来jest.mock ( #4262 ) 中存在关于moduleNameMapper的问题，用于模块解析器、别名、路径，无论您想使用@/something调用@/something 。

// you cannot use a module resolver (i.e. '@')
jest.mock('@/services/orders.service');

// you must use the full path to the file for the import and mock
import OrdersService from '../../src/services/orders.service';
jest.mock('../../src/services/orders.service');

请继续关注该问题的更新，看起来最后一次更新是在9/28 。

其次，如果您解决了上述问题，您将导出一个类实例而不是类本身，就像在 Jest 示例中所做的那样。 因此，您将无法访问clearMock的方法OrdersService而是你可以打电话clearMock上的类实例每次模拟的方法。

// mockClear will be undefined
OrdersService.mockClear();

// mockClear is defined
OrdersService.getAll.mockClear();

如果你想为你出口的情况下，你可以只使用清除所有的嘲笑jest.clearAllMocks在beforeEach通过所有方法，或者循环，并呼吁mockClear每个。 否则，导出类本身将使您可以访问OrdersService.mockClear ，这将...

清除所有实例和对构造函数和所有方法的调用（参考）

在您尝试测试的另一个类中使用/实例化模拟类的情况下，这似乎很有用，如在 jest 示例中。

所有这些都已经使用 Jest v23.6 和 vue-cli v3.0.4 进行了测试和确认。

Answer 2

由于 OrdersService 是该类的一个实例，它将返回一个对象，您需要手动模拟该对象公开的所有属性。

您可以尝试使用以下实现来模拟您的功能。 参考文档

OrdersService.getAll = jest.fn(()=>{
// mock implementation here;
});

希望这可以帮助 ：）

Answer 3

您可以尝试在beforeEach块中调用jest.resetModules() ，这可能会导致使用beforeEach服务

Answer 4

尝试使用别名导入所有内容并在别名上设置模拟。

import * as OrdersModule from '@/services/orders.service';
OrdersModule.getAll = jest.fn()

我在圣经中找到了它： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules