[英]Mock Document for Jest Testing
我在react組件中有一個像這樣的函數:
handleOnScroll = () => {
const {navigationSections, setNavigationSectionActive} = this.props;
const reversedSections = this.getReversedNavigationSections();
const OFFSET_TOP = 32;
const st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
for (let i = 0; i < navigationSections.length; i += 1) {
if(document.getElementById(navigationSections[i].id).getBoundingClientRect().top <= OFFSET_TOP) {
setNavigationSectionActive(navigationSections[i].id);
}
}
} else if (st < lastScrollTop) {
for (let y = 0; y < reversedSections.length; y += 1) {
if(document.getElementById(navigationSections[y].id).getBoundingClientRect().top <= OFFSET_TOP) {
setNavigationSectionActive(navigationSections[y].id);
}
}
}
lastScrollTop = st <= 0 ? 0 : st;
}
和一些測試是這樣的:
it('should handle handleOnScroll', () => {
instance.handleOnScroll();
expect(instance.getReversedNavigationSections()).toEqual(props.navigationSections.reverse());
});
props.navigationSections.forEach(navSection => {
it('should call setNavigationSectionActive', () => {
instance.handleOnScroll();
expect(props.setNavigationSectionActive).toHaveBeenCalledWith(navSection.id);
});
});
您可以看到,第一個測試通過了,但是第二個測試(“應該調用setNavigationSectionActive”)失敗了:
我認為原因是因為文件沒有被嘲笑,所以if失敗了。 但是,在實際的實現中,當執行此命令時:
document.getElementById(navigationSections[i].id).getBoundingClientRect().top
具有這些ID的DIV在另一部分中(不在用於測試的包裝器組件中)。
我應該模擬文檔以模仿if語句通過的實際結構,還是我完全錯了?
我的嘗試如此之遙
it('should handle custom handleOnScroll', () => {
document.body.innerHTML = '<div><div id="id">my div</div><div id="id-1">my div</div></div>';
const div = document.getElementById('id');
div.getBoundingClientRect = () => ({ top: 100 }); // <= mock getBoundingClientRect
instance.handleOnScroll();
props.navigationSections.forEach(() => {
if (global.document.getElementById('id').getBoundingClientRect().top <= global.OFFSET_TOP) {
expect(props.setNavigationSectionActive).toHaveBeenCalledWith('id');
}
});
});
Jest
的默認測試環境是jsdom
,它提供了類似瀏覽器的環境。
如果您的測試需要document
特定內容,則可以使用諸如document.body.innerHTML
類的document.body.innerHTML
來設置文檔正文。
jsdom
實現了許多瀏覽器功能,但不是全部。 在這種情況下, getBoundingClientRect
被設置為始終返回0
因此,如果您希望它返回其他內容,則必須對其進行模擬。
這是一個簡單的工作示例,可以幫助您入門:
const OFFSET_TOP = 5;
const func = () =>
document.getElementById('theid').getBoundingClientRect().top <= OFFSET_TOP ?
'less' :
'more';
test('func', () => {
document.body.innerHTML = '<div id="theid">my div</div>';
expect(func()).toBe('less'); // Success!
const div = document.getElementById('theid');
div.getBoundingClientRect = () => ({ top: 10 }); // <= mock getBoundingClientRect
expect(func()).toBe('more'); // Success!
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.