Question

给出以下代码，我在main.js中导出了两个函数，并且我想测试theChanger返回正确的字符串（如果我将其传递给html元素）。我想模拟getBoundingClientRect();的返回值，这样我就不必担心TypeError: itemData.getBoundingClientRect is not a function的错误打击。

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.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")
});

main-test.js

ifelse

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）。

开玩笑不能模拟函数的返回值

1 个答案: