目标容器不是 DOM 元素。在用玩笑测试 ReactDOM.render 时答案

【问题标题】：Target container is not a DOM element. while testing ReactDOM.render with jest目标容器不是 DOM 元素。在用玩笑测试 ReactDOM.render 时
【发布时间】：2020-09-16 00:05:24
【问题描述】：

我正在使用 redux 测试一个基本反应项目的 index.js 文件。该文件包含 ReactDOM.render 并且我收到上述错误。

index.js

import React from "react";
import ReactDOM from "react-dom";
import store from "./configureStore";
import { Provider } from "react-redux";
import Favicon from "react-favicon";
import App from "components/App";

function renderToDom() {
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById("root")
  );
}

renderToDom();
export { renderToDom };

index.test.js

import ReactDOM from "react-dom";
import { mock } from "jest";
import { renderToDom } from "./index";

describe("test ReactDOM.render", () => {
  const originalRender = ReactDOM.render;
  const originalGetElement = global.document.getElementById;
  beforeEach(() => {
    global.document.getElementById = () => true;
    ReactDOM.render = jest.fn();
  });
  afterAll(() => {
    global.document.getElementById = originalGetElement;
    ReactDOM.render = originalRender;
  });
  it("should call ReactDOM.render", () => {
    renderToDom();
    expect(ReactDOM.render).toHaveBeenCalled();
  });
});

我不知道如何测试这个 index.js 文件。

【问题讨论】：

标签： reactjs redux jestjs enzyme react-testing-library

【解决方案1】：

出现这种情况的原因是jest生成的document是空的，它不包含你的root div，所以你应该把这个添加到你的测试代码中：

const root = document.createElement('div');

    beforeEach(() => {
        document.body.appendChild(root);

        const content = (
            <Provider store={store}>
                <App/>
            </Provider>
        );

        render(
            content,
            root
        );
    });

【讨论】：