Как проверить с 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)
}

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

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