Блог

Я тестирую свой index.js файл базового проекта react с redux. Файл содержит 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 файл.

Причина, по которой это происходит, в том, что document сгенерированный jest контейнер пуст, он не содержит вашего root div , поэтому вы должны добавить это в свой тестовый код:

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

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

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

        render(
            content,
            root
        );
    });