有没有办法在测试 React 组件之前模拟 DOM？

Question

我正在尝试测试我的 React class（使用 TestUtils、Enzyme 和 Jest），但由于我们不得不忍受一些变通办法，它依赖于服务器中的元素- rendered HTML 页面——也就是说，它在渲染之前从 componentDidMount 中的 DOM 抓取某些元素。例如：

componentDidMount() {
  document.documentElement.classList.add('example');
  this.someOtherFunction(document.getElementsByClassName('my-great-className'))
}

我想测试这个组件，但是 componentDidMount 中的函数当然会失败，因为服务器呈现的 HTML 页面在测试中不存在。有没有办法在渲染 React 组件之前模拟特定的 DOM？

Answer 1

您可以在开始测试之前设置这些东西

global.document = {
  documentElement: {
    classList: {
      add: jest.fn()
    }
  }
  getElementsByClassName: jest.fn({id:'id'})
}

在您的测试中，您可以检查 add 是用 example 调用的，而 someOtherFunction 是用 {id:'id'} 调用的。由于所有测试文件运行都在其自己的沙箱中，因此设置您这样的文档模拟是完全安全的。

有没有办法在测试 React 组件之前模拟 DOM？

Is there a way to mock a DOM before testing a React component?

dom

reactjs

jestjs

enzyme