如何模拟使用文档对象的React组件？

Question

我目前正在为应用程序中的react组件编写单元测试。 react组件利用DOM API，例如document.getElementById（）。 当我从酶中使用shallow（）或mount（）时，出现一个错误，指出文档对象为空：

我认为jsdom已经附带了jest作为无头浏览器。如何解决此问题以访问伪造的dom对象？

Answer 1

首先，组件最好不要直接使用DOM，因为这会影响可测试性和SSR。如果使用Rven，则最好使用相对查询，而不是document。

JSDOM不是无头浏览器，而是模拟浏览器环境的Node.js环境。

玩笑使用JSDOM by default。 document不能为null，除非它是在某处专门分配给它的。如果将Jest配置为不使用JSDOM，则会抛出document is not defined错误。

错误指出，是document.getElementById()而不是null的结果是document。

document.getElementById应该和其他函数一样被模仿：

jest.spyOn(document, 'getElementById').mockReturnValueOnce({ value: '...' });