用Jest模拟在vue组件中导入的模块 [英] Mocking a module imported in a vue component with Jest

问题描述

我在处理 Jest文档时遇到了一些问题，因为我希望这段代码能正常工作:

I'm having some issues processing the documentation of Jest, because I expected this code to work:

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，它将失败.我也尝试过类似的东西:

However it does not. It fails as-if OrdersService was never mocked. I've also tried stuff like:

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

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

First one replaces the whole service with a mock function (I'd like to achieve that automatic mocking functionality mentioned in the docs, where all the methods from the original are auto-replaced with mock fn). Second one fails same way as the .mock call with just the module path.

我在这里做错什么，为什么?

What am I doing wrong here and why?

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似乎存在问题(

It looks like there is an issue in with jest.mock (#4262) concerning moduleNameMapper for module resolvers, aliases, path, whatever you want to call using @/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 .

Stay tuned to updates on the issue, looks like the last update was on 9/28.

第二，只要您解决了上述问题，就可以导出类实例，而不是类本身，就像Jest示例中那样.因此，您将无权访问OrdersService上的clearMock方法，而是可以在类实例上的每个模拟方法上调用clearMock.

Secondly, provided you fix the issue above, you are exporting a class instance not the class itself, as is done in the Jest example. Therefore, you will not have access to the clearMock method on the OrdersService but rather you can call clearMock on each mocked method on the class instance.

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

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

如果您想按原样导出实例，则可以使用beforeEach中的> jest.clearAllMocks 或循环浏览所有方法，并在每个方法上调用mockClear.否则，导出类本身将使您可以访问OrdersService.mockClear，这将...

If you want to export the instance as you are, you could just clear all mocks using jest.clearAllMocks in the beforeEach or loop through all methods and call mockClear on each. Otherwise exporting the class itself will give you access to OrdersService.mockClear which will ...

清除所有实例，并调用构造函数和所有方法(参考)

在嘲笑的类正被您尝试测试的另一个类中使用/实例化的情况下，这似乎很有用.

This seems to be useful in cases where the mocked class is being used/instantiated in another class that you are trying to test, as in the jest example.

所有这些均已通过Jest v23.6和vue-cli v3.0.4进行了测试和确认.

这篇关于用Jest模拟在vue组件中导入的模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！