jestjs - 在 Jest 中测试 ScrollIntoView

Question

使用scrollIntoView的函数

export const scrollDown = () => {
    document.querySelector('.bottom').scrollIntoView({ 
        behavior: 'smooth' 
    });
}

我这里有一个测试是这样的

describe('scrollDown', () => {
    let scrollIntoViewMock = jest.fn();
    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
    scrollDown()
    expect(scrollIntoViewMock).toBeCalled();
})

但测试失败并出现类型错误:无法设置未定义的属性“scrollIntoView”

测试来自 scrollIntoView 测试问题的另一个 SO 答案。任何帮助将不胜感激。

Answer 1

你需要添加一个 HTMLElement 类 bottom 到 document:

const scrollDown = () => {
  document.querySelector('.bottom').scrollIntoView({ 
      behavior: 'smooth' 
  });
}

test('scrollDown', () => {
  document.body.innerHTML = '<div class="bottom"></div>';
  const scrollIntoViewMock = jest.fn();
  HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
  scrollDown();
  expect(scrollIntoViewMock).toBeCalledWith({ behavior: 'smooth' });  // Success!
})