Question

我试图测试我的React类（使用TestUtils，Enzyme和Jest），但由于我们不得不忍受的一些解决方法，它依赖于服务器呈现的HTML中的元素page - 即，它在呈现之前从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？

1 个答案: