reactjs使用Enzyme进行测试，类型错误：无法读取null的属性'appendChild'

Question

请帮助，我有一个小型演示程序。 该代码在浏览器中很好用，但在测试中失败。

代码是这样的：

• 呈现两个链接：“ HOME”和“ MODELER”作为Navigation组件的一部分。
• 使用react-router来实现所需的路由： /渲染HomePage和/modeler渲染ModelerPage
• HomePage组件应仅呈现<h1>Home</h1> ModelerPage组件应呈现<h1>Modeler</h1>以及已初始化的<h1>Modeler</h1>实例，该实例在<h1>之后呈现到容器中。 通过“建模者”，我指的是库bpmn.js（可在此处找到文档： https : //github.com/bpmn-io/bpmn-js ）

这是整个应用程序和工作演示的链接： https : //codesandbox.io/s/jr89309w9

我的问题是，当我在测试中尝试加载建模器时，它失败并显示错误：

TypeError: Cannot read property 'appendChild' of null

这是我的建模器组件：

import React, { Component } from "react";
import BpmnJS from "bpmn-js/dist/bpmn-modeler.development.js";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
class ModelerPage extends Component {
  constructor(props) {
    super(props);
    this.viewer = new BpmnJS()
  }

  componentDidMount() {
    const cont = document.querySelector('.container')
    this.viewer.attachTo(".container");
  }
  componentWillUnmount() {
    this.viewer.detach();
  }
  render() {
    return (
      <div>
        <h1>Modeler</h1>
        <div className="container"> </div>
      </div>
    );
  }
}
export default ModelerPage;

这是我的测试：

import "../jest-setup";
import { mount } from "enzyme";
import React from "react";
import App from "./App";

it("renders an app with 2 routes, home and modeler page", async () => {

  const wrapper = mount(
    <MemoryRouter initialEntries={["/"]} initialIndex={0}>
      <App />
    </MemoryRouter>
  );
  const HomeTitle = <h1>Home</h1>;
  const ModelerTitle = <h1>Modeler</h1>;


  // Home title is rendered
  expect(wrapper.contains(HomeTitle)).toEqual(true);

  // When clicking the /modeler link
  wrapper.find('[href="/modeler"]').simulate("click", { button: 0 });

  // Modeler title is rendered
  expect(wrapper.contains(ModelerTitle)).toEqual(true);


  // Modeler container is rendered   
  expect(wrapper.html()).toMatch(/.bjs-container/);

});

BpmJS库已加载到componentDidMount()因此DOM应该已经准备就绪，但是enzyme.mount()并没有真正重新创建DOM。

这些组件应该如何测试？

Answer 1

解决方法很简单：

只需添加一个构造函数并实例化： React.createRef(); 像这样：

constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.viewer =  new BpmnJS()
  }

和元素，而不是使用className ，而是使用ref={this.myRef}如下所示：

    <div ref={this.myRef}> </div>

这应该做