Jest не может высмеивать возвращенное значение функции

Question

Учитывая приведенный ниже код, у меня есть две функции в main.js, которые я экспортирую, и я хочу проверить, что getChangedItems возвращает правильную строку, учитывая, что я передаю ей HTML-элемент. Я хочу смоделировать возвращаемое значение theChanger, чтобы мне не пришлось беспокоиться об ошибке getBoundingClientRect();.

TypeError: itemData.getBoundingClientRect is not a function

main.js

export const theChanger = (itemData) => {
 const { top: parentTop, left: parentLeft } = itemData.getBoundingClientRect();
...

    return { isFull: true, isPartial: true};
}

export const getChangedItems = (itemData) => {
    let items = '';
    const changeIdicator = theChanger(itemData); // I want to mock the return value of this
    if(changeIdicator.isFull || changeIdicator.isPartial) {
        let items = "I made it";
    }
   return items
}

main-test.js

import { theChanger, getChangedItems } from './main.js';
test('getChangedItems returns correct data', () =>  {
    const htmlElement = '<div>Some element</div>'

    expect(getChangedItems(htmlElement)).toBe("I made it")
});

Answer 1

Вы передаете строку

 const htmlElement = '<div>Some element</div>'

на самом деле это не элемент HTML.Так что у него нет метода getBoundingClientRect.

Может быть, вы могли бы как-то использовать JSDOM createElement для создания элемента.Но я полагаю, что для целей тестирования еще лучше создать объект с использованием только части свойств HTMLElement.

Просто так:

const htmlElement = {
    getBoundingClientRect: {top: <what you need>, left: <what you need>}
    ... any other methods expected
}

Почему это лучше, чем использование фактического конструктора HTMLElement?Поскольку вы тестируете какой-то конкретный модуль, а не сам механизм рендеринга DOM, вам не нужно хранить эту запись с полными и непротиворечивыми данными.Проще издеваться только над тем, что тебе нужно.Более ясно, что на самом деле нужно вашему модулю, посмотрев на этот макет.И вы можете предоставить макет, который почти невозможно получить, используя createElement (скажем, getBoundingClientRect может вернуть top: Infinity).