Jest + React：IntersectionObserver 模拟不起作用？

Question

在我的 component.test.js 中，我尝试通过执行以下操作来模拟 IntersectionObserver：

const mock = ()=>({
    observe: jest.fn(),
    disconnect: jest.fn()
});
window.IntersectionObserver = jest.fn().mockImplementation(mock);


describe("Component", ()=>{
    it("test 1", ()=>{
        render(<Component/>);
        ...
    }
});

我的 component.js 看起来像这样（它可以无限分页）：

//ref to last item loaded >> load more items once it enters view
const observer = useRef();
const lastEntryRef = useCallback((node)=>{
        ...
        observer.current.disconnect(); //ERROR LINE
    }
    ...
);

然而，当我运行测试时，我得到 TypeError: observer.current.disconnect is not a function；如果运行s，observer.current.observe() 也是如此。我尝试通过实例化一个 IntersectionObserver 然后调用这些方法在 component.test.js 本身的 it() 块中测试它，当我重新运行测试时显示相同的消息，所以错误看起来与如何无关IntersectionObserver 是在 component.js 中设置的。我没有正确地嘲笑 IntersectionObserver 吗？如果是这样，我该如何解决？

Answer 1

我建议您将 arrow function 替换为 normal function，因为您需要使用 new operator 来创建 InterceptionObserver 对象：

const mock =  function() {
  return {
    observe: jest.fn(),
    disconnect: jest.fn(),
  };
};

//--> assign mock directly without jest.fn
window.IntersectionObserver = mock;

您可以检查是否已调用 window.InterceptionObserver.observe。

Jest + React：IntersectionObserver 模拟不起作用？

Jest + React: IntersectionObserver mock not working?

javascript

unit-testing

reactjs

jestjs

intersection-observer