Как проверить с Jest, что ReactDOM.render был вызван, когда он был заключен в условное выражение?

Question

У меня есть следующий реагирующий компонент и он условно вызывает ReactDOM.render если root === true чтобы удовлетворить flow:

import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'

const root = document.getElementById('root')

if (root !== null) {
  ReactDOM.render(<App />, root)
}

Проблема в том, что этот тест больше не равен истине, вероятно, потому, что условное обертывание должно быть смоделировано как истина или что-то еще, но я не могу понять это.

import ReactDOM from 'react-dom'

jest.mock('react-dom')

require('../index')

test('Renders the application', () => {
  expect(ReactDOM.render).toBeCalled()
})

Как мне обновить мой тест, чтобы проверить, что ReactDOM.render называется?

Answer 1

Я думаю, что этот контрольный пример является избыточным, так как вам нужно будет смоделировать документ и визуализировать функцию, так что в основном то, что вы тестируете, является лишь условным. Но может быть похожий вариант использования. Вы должны внести следующие изменения в код.

function renderToDOM() {
    if (root !== null) {
        ReactDOM.render(<App />, root)
    }
}
renderToDOM();
export {renderToDOM};

Сделав это изменение, мы сможем написать чистый тест и протестировать только этот фрагмент кода независимо. Ниже приведен тест, который сработал для меня. Пришлось смоделировать ReactDOM.render, а также document.getElementById, чтобы заставить тестовый пример работать.

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();
  });
});

Ниже приведена ссылка на изолированную программную среду кода, где вы можете увидеть, как проходит этот тест, и тесты проходят https://codesandbox.io/s/7wr0k7qmq