Javascript 使用酶进行reactjs测试，TypeError:无法读取属性'；追加儿童'；空的

请帮忙， 我有一个我创建的小演示。 该代码在浏览器中运行良好，但在测试中失败

以下是代码的作用：

• 呈现两个链接：“主页”和“建模器”作为

  导航组件的一部分

• 使用

  react路由器

  实现所需的路由：

  /

  呈现

  主页

  和

  /modeler

  渲染

  ModelerPage

• 主页

  组件只需呈现

  主页

  -ModelerPage组件应呈现

  Modeler

  以及初始化的Modeler 实例，该实例由“modeler”在
  之后呈现到容器中。我参考了库bpmn.js（可以在这里找到文档：）

以下是指向整个应用程序和工作演示的链接：

我的问题是，当我尝试在测试中加载modeler时，它失败并出现错误：

TypeError: Cannot read property 'appendChild' of null

以下是我的modeler组件：

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 React，{Component}来自“React”；
从“bpmn js/dist/bpmn modeler.development.js”导入BpmnJS；
导入“bpmn js/dist/assets/diagram js.css”；
导入“bpmn js/dist/assets/bpmn font/css/bpmn embedded.css”；
类ModelerPage扩展组件{
建造师（道具）{
超级（道具）；
this.viewer=new BpmnJS（）
}
componentDidMount（）{
const cont=document.querySelector（“.container”）
this.viewer.attachTo（“.container”）；
}
组件将卸载（）{
this.viewer.detach（）；
}
render（）{
返回(
建模者
);
}
}
导出默认模型页面；

以下是我的测试：

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/);

});

导入“./jest设置”；
从“酶”导入{mount}；
从“React”导入React；
从“/App”导入应用程序；
它（“呈现一个带有2条路由的应用程序，主页和建模器页面”，async（）=>{
常量包装器=装入(
);
const HomeTitle=主页；
const ModelerTitle=建模者；
//主标题已呈现
expect（wrapper.contains（HomeTitle））.toEqual（true）；
//单击/modeler链接时
wrapper.find（'[href=“/modeler”]'）.simulate（“单击“，{button:0}”）；
//渲染建模器标题
expect（wrapper.contains（ModelerTitle））.toEqual（true）；
//渲染Modeler容器
expect（wrapper.html（））.toMatch（/.bjs container/）；
});

BpmJS库加载在

componentDidMount（）

中，因此DOM应该准备好了，但是

enzyme.mount（）

并没有真正重新创建DOM

应如何测试此类组件？

修复很简单：

只需添加一个构造函数并实例化：

React.createRef（）
像这样：

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

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



这应该可以

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