Question

请帮助，我创建了一个小演示。该代码在浏览器中很好用，但在测试中失败。

这是代码的作用：

在Navigation组件中提供两个链接：“ HOME”和“ MODELER”。
使用react-router来实现所需的路由：/来渲染HomePage 和/modeler渲染ModelerPage
HomePage组件应仅呈现<h1>Home</h1> -ModelerPage组件应呈现<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>

这应该做

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

1 个答案: