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

我在处理时遇到一些问题笑话的文档 https://jestjs.io/docs/en/es6-class-mocks#automatic-mock，因为我希望这段代码能够工作：

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);

似乎有问题jest.mock (#4262 https://github.com/facebook/jest/issues/4262） 关于moduleNameMapper对于模块解析器、别名、路径，无论你想使用什么来调用@/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 https://github.com/facebook/jest/issues/4262#issuecomment-425378049.

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

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

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

如果您想按原样导出实例，您可以使用以下命令清除所有模拟jest.clearAllMocks https://jestjs.io/docs/en/jest-object#jestclearallmocks in the beforeEach或循环遍历所有方法并调用mockClear在各个。否则导出类本身将使您能够访问OrdersService.mockClear这将...

清除所有实例以及对构造函数和所有方法的调用(ref) https://jestjs.io/docs/en/es6-class-mocks#automatic-mock

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

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