Мокирующие функции в Jest

Я новичок в тестировании JavaScript и в настоящее время пытаюсь написать несколько тестовых примеров для магазина (просто класса ES6), который я создал. Я использую Jest, поскольку это то, что мы обычно используем для проектов React, хотя здесь я тестирую не компонент React, а просто класс, оборачивающий функциональность.

Класс, который я тестирую, расширяет другой класс, и в нем определены различные методы. Я хочу протестировать эти методы (независимо от того, вызываются они или нет), а также меняются ли свойства, объявленные в классе, при вызове соответствующих методов класса.

Теперь я прочитал о фиктивных функциях, но, насколько я понимаю, они могут только проверять, например, сколько раз вызывается функция, но не могут реплицировать функциональность. Но в моем случае мне нужна функциональность методов, потому что я буду проверять значения членов класса, которые эти методы изменяют при вызове.

Я не уверен, что это правильный подход. Неправильно ли тестировать функции в Jest без издевательства? И логически, чтобы проверить внутреннюю работу функций? Когда мы имитируем функции во время тестирования?

Проблема, с которой я сталкиваюсь, заключается в том, что проект, над которым я работаю, является большим, в котором существует несколько уровней зависимостей классов / функций, и становится трудно протестировать его с помощью Jest, поскольку необходимо будет пройти через все из них. Поскольку я использую псевдоним для путей к файлам в проекте, Jest выдает ошибки, если не находит ни одного модуля. Я знаю, что можно использовать Webpack с Jest, но многие из зависимых классов / функций в коде не находятся в React, и их пути к файлам псевдонимов не поддерживаются Webpack.

import { getData } from 'service/common/getData';

class Wrapper extends baseClass {
    someVariable = false;
    payload = null;

    changeVariable() {
        this.someVariable = true;
    }

    async getData() {
        super.start();
        response = await fetchData();
        this.payload = response;
        super.end();
    }
}

Это небольшое представление реального кода, который у меня есть. Не могу опубликовать здесь весь класс, так как я работаю на удаленной машине. По сути, я хочу проверить, вызывается ли changeVariable при вызове и успешно ли он меняет someVariable на true при вызове; и аналогичным образом проверьте значение payload после завершения сетевого запроса. Обратите внимание, что fetchData определен в каком-то другом файле, но имеет решающее значение для тестирования метода getData. Также путь, используемый здесь (service/common/getData) для импорта getData, не является абсолютным путем, а является псевдонимом, НЕ определенным в Webpack, а где-то еще. Из-за этого Jest не может разрешить getData. Мне не придется беспокоиться об этом, если я буду издеваться над getData, но, как мне кажется, тогда я не смогу протестировать его функциональность.

Разместите код.

Ru Chern Chong 04.04.2018 19:54

@RuChernChong: Код добавлен.

darKnight 04.04.2018 20:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
828
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

@maverick Совершенно нормально тестировать методы вашего класса с помощью шутки. Проверьте пример кода по ссылке -

https://repl.it/repls/ClumsyCumbersomeAdware

index.js

class Wrapper {
  constructor(){
    this.someVariable = false;
  }
  changeVariable(){
    this.someVariable = true;
  }

  getData(){
    return new Promise(resolve => resolve('some data'));
  }
}


module.exports = Wrapper;

index.test.js

const Wrapper = require('./index');

const wrapper = new Wrapper();

describe('Wrapper tests', () => {
  it('should changeVariable', () => {
    wrapper.changeVariable();
    expect(wrapper.someVariable).toBe(true);
  });

  it('should get some data', () => {
    wrapper.getData().then( res => expect(res).toBe('some data'));
  });
});

Это очень упрощенный пример, и в реальной жизни асинхронные вызовы намного сложнее и зависят от сторонних библиотек или других модулей проекта. В таких случаях имеет смысл внедрить все зависимости в класс out, а затем по отдельности высмеивать их. Например -

class GMapService {
  constructor(placesApi, directionApi){
      this.placesApi = placesApi;
      this.directionApi = directionApi;
  }

  getPlaceDetails(){
    this.placesApi.getDetails('NYC');
  }

  getDirections(){
    this.directionApi.getDirections('A', 'B');
  }
}

Теперь вы можете легко имитировать placeApi и directionApi и тестировать их по отдельности, фактически не требуя зависимостей Google Map.

Надеюсь это поможет ! ?

Другие вопросы по теме