如何对具有document.querySelector的函数进行单元测试

Question

export function getNavHeight() {
const merchantNav = document.getElementById(
'merchant-header-main-wrapper-internal'
)
const dw2Nav = document.querySelector('.cw_navbar__mainnav')
let navHeight = 72 // Consumer header is fixed to 72
if (merchantNav) {
navHeight = merchantNav.offsetHeight
}
if (dw2Nav) {
navHeight = dw2Nav.offsetHeight
}
return navHeight
}

上面的块是我想为其编写单元测试的函数，我们使用的是Jest，我们的应用程序大多是用React编写的。之所以使用此函数，是因为我们有一些其他客户端脚本被调用来渲染不同的Nav，所以我们使用此函数来确定Nav Height。测试这一点的最佳方法是什么？我是新来的测试，所以任何帮助都将不胜感激。

我对如何创建一个"；Fake Dom"；并插入具有不同className的不同Nav以测试结果

Answer 1

您只需要模拟document.querySelector。