React TypeError： 无法在 document.getElementByID JEST TESTING 之后读取 null 的属性 'parentNode'

Question

我已经设置了几个Jest测试，但它们不起作用，并返回了这个错误。

    TypeError: Cannot read property 'parentNode' of null
     44 |     console.log(document.getElementById("body"));
     45 |     var title = document.getElementById("modalTitle"),
   > 46 |       parentTitle = title.parentNode,

当我运行这个程序时，虽然一切都正常，没有错误，但一切都很好。我添加了一些模拟更改，在日志中输入一些假值，以检查这是否有帮助，但没有。

这是测试代码。

DisplayJournal.spec.tsx

import * as React from "react";
import { shallow } from "enzyme";
import { DisplayJournal } from "./DisplayJournal";
import AddJournal from "./AddJournal";
let mock: any = jest.fn();
const DisplayJournal_Mock = shallow(
  <DisplayJournal
    selectedJournal={{
      id: 1,
      title: "hello",
      notes: "frog",
      reference: "Test",
      date: "12"
    }}
    deselectJournal={mock}
    onClickEditJournal={mock}
    match={mock}
    location={mock}
    //@ts-ignorecls
    history={{ push: mock }}
  />
);
test("DisplayJournal.Render() does not return null.", () => {
  expect(DisplayJournal_Mock.type()).not.toBeNull();
  expect(DisplayJournal_Mock.type()).not.toEqual(null);
  expect(DisplayJournal_Mock.get(0)).not.toBeNull();
  expect(DisplayJournal_Mock.get(0)).not.toEqual(null);
});
test("DisplayJournal.tsx contains information", () => {
  expect(DisplayJournal_Mock.find(".modalBody")).not.toBeNull();
  expect(DisplayJournal_Mock.find("#refPlaceholder")).not.toBeNull();
  expect(DisplayJournal_Mock.find(".editButton")).not.toBeNull();
});
test("Checking onClick for edit button can be reached", () => {
  const jestFunc = jest.fn();
  const AddJournal_Mock = shallow(
    <AddJournal handleSubmit={() => this._handleSubmit} />
  );
  AddJournal_Mock.find("#value").simulate("change", {
    target: jestFunc,
    value: "testVal",
    preventDefault: jestFunc
  });
  AddJournal_Mock.find("#notes").simulate("change", {
    target: jestFunc,
    value: "testNotes",
    preventDefault: jestFunc
  });
  AddJournal_Mock.find("#value").simulate("change", {
    target: jestFunc,
    value: "testName",
    preventDefault: jestFunc
  });
  AddJournal_Mock.find("#button").simulate("click", {
    preventDefault: jestFunc
  });
  const eventProps = {
    preventDefault: jestFunc
  };
  const button = DisplayJournal_Mock.find("button").at(0);
  button.simulate("click", eventProps);
  expect(jestFunc).toBeCalled();
});

现在这是正在测试的文件，我将对出现问题的行进行BlockQuote。

import * as React from "react";
import { Journal } from "../Models";
import Modal from "../../../global/components/modal/Modal";
import * as css from "../css/journal.scss";
import { connect } from "react-redux";
import { hideJournal, editJournal } from "../Actions";
import { Route, RouteComponentProps, withRouter } from "react-router-dom";
import { getNames } from "../Selectors";
import { State } from "../Reducers";
interface Props extends RouteComponentProps {
  selectedJournal: Journal;
  deselectJournal: Function;
  onClickEditJournal: Function;
}
interface States {
  title: string;
  body: string;
  name: string;
  date: string;
  names: string[];
}
var edited = false;
export class DisplayJournal extends React.Component<Props, States> {
  constructor(props: Props) {
    super(props);
    this.state = {
      title: "",
      body: "",
      name: "",
      date: "",
      names: []
    };
  }
  _dismiss(e: React.MouseEvent): void {
    e.stopPropagation();
    e.preventDefault();
  }
  handleClick = g => {

    console.log(document.getElementById("body"));
    var title = document.getElementById("modalTitle"),
      parentTitle = title.parentNode,

这个问题是modalTitle是模态组件的一部分。我在JEST测试中解决这个问题的方法是将shallow更改为mount，我也可以使用shallow(AddJournal_Mock).dive();