Пересмешивание модуля, импортированного в компонент vue, с помощью Jest - PullRequest
Новая
       19

Пересмешивание модуля, импортированного в компонент vue, с помощью Jest

0 голосов
/ 30 сентября 2018

У меня возникли некоторые проблемы при обработке документации 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() });

Первый из них заменяет весь сервис фиктивной функцией (я хотел бы добиться того, чтобы функция автоматического имитации была упомянута в документации, где все методы из оригиналаавтоматически заменяются на макет фн).Второй сбой происходит так же, как и вызов .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);

Ответы [ 3 ]

0 голосов
/ 08 октября 2018

Похоже, есть проблема с jest.mock ( # 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 .

Во-вторых, при условии устранения проблемы, указанной выше, вы экспортируетеэкземпляр класса, а не сам класс, как это сделано в примере Jest.Следовательно, у вас не будет доступа к методу clearMock в OrdersService, вместо этого вы можете вызывать clearMock для каждого смоделированного метода в экземпляре класса. 

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

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

Если вы хотите экспортироватьНапример, вы можете просто очистить все макеты, используя jest.clearAllMocks в beforeEach или выполнить цикл по всем методам и вызвать mockClear для каждого.В противном случае экспорт самого класса даст вам доступ к OrdersService.mockClear, который будет ...

Очистить все экземпляры и вызовы конструктора и всех методов (ref)

Это представляется полезным в тех случаях, когда макетированный класс используется / создается в другом классе, который вы пытаетесь протестировать, как в примере с шуткой.

Все это имеетбыл протестирован и подтвержден с использованием Jest v23.6 и vue-cli v3.0.4.

0 голосов
/ 09 октября 2018

Поскольку OrdersService является экземпляром класса, он вернет объект, и вам нужно будет смоделировать все свойства, предоставляемые этим объектом вручную.

Вы можете попробовать в следующей реализации смоделировать вашу функцию, Справочные документы 

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

Надеюсь, это поможет:)

0 голосов
/ 04 октября 2018

Вы можете попробовать позвонить jest.resetModules() в блоке beforeEach, что может привести к использованию смоделированной службы

...