Как проверить этот метод с шуткой

Question

Я немного изо всех сил пытаюсь найти решение о том, как проверить эту экспортированную функцию с помощью jest.

export const scrollToError = () => {
  setTimeout(() => {
    const hasErrorElement = jQuery('.has-error');
    if (!hasErrorElement.length) return;
    jQuery('html,body').animate({
      scrollTop: hasErrorElement.offset().top - 50,
    }, 'slow');
  }, 400);
};

Я импортировал ее в свой тестовый файл и попытался запустить:

import { scrollToError } from './utils';

describe('Utils', () => {
  it('should scroll to error', () => {
    const result = scrollToError();
    expect(result).toBe(true); //added this just to force an error and got result as undefined 
  });
});

Может кто-нибудь дать мне какие-нибудь советы о том, как тестировать код с этими зависимостями?

Answer 1

Как вы используете jQuery?

Я имею в виду, вы использовали его с помощью npm или пряжи?Чтобы смоделировать node_modules, вы можете перейти по этой ссылке: https://jestjs.io/docs/en/manual-mocks#mocking-node-modules

В противном случае вам придется создать ручной макет.Вы можете посмотреть, как это сделать, здесь: https://jestjs.io/docs/en/manual-mocks

Обновлено:

Самый простой способ - это переопределить его, установив тест по методу beforeXXX.

Вы можете просто поместить что-то вроде window.JQuery = jest.fn();

, это самый простой макет за всю историю, но вам придется создавать методы, такие как animate и другие методы, связанные с jquery.

Подуматьздесь и обращаясь к вашей функции, если вы дразните jQuery, что еще осталось проверить?

Если вы дразните, вы будете проверять, выполняет ли ваш fn шаги, которые вы определили здесь.Например, проверить, был ли jQuery fn вызван с классом .has-error или animate получил правильные параметры.

Этот вид теста вам совсем не помогает, он просто проверяет, следует ли строка за строкойваш алгоритм.Проблема здесь в том, что вы могли бы сделать некоторые рефакторинги, такие как изменение имени класса .has-error или метода animate другим улучшенным.

Что вам действительно нужно изменить, если он делает в конце то, что должен делать.Отображение div или что-то, что должно отображаться.Если вы проверите это, независимо от способа рефакторинга вашего кода, тест проверит, работает ли окончательное решение и что это имеет значение.

Был ли я ясен?Английский не мой родной язык, поэтому он может немного сбивать с толку

Answer 2

scrollToError() - асинхронная функция, и вы не можете вызвать ее и ожидать, что результат будет тут же.Вам нужно подождать это количество мс (400 в вашем случае), прежде чем тестировать его.

Асинхронный код проверяется немного по-другому в Jest: Тестирование асинхронного кода .Вы также можете взять под контроль таймеры или объединить их с ручными издевательствами и переопределить сам jQuery.