javascript - 如何用 Jest 测试 ReactDOM.render 在被条件包装时被调用？

Question

我有以下 React 组件，它有条件地调用 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，大概是因为条件包装需要被模拟为 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