代码之家 › 专栏 › 技术社区 › bert

如何用Jest测试ReactDOM.render在包装为条件时是否被调用?

jestjs reactjs javascript

bert · 技术社区 · 8 年前

我有下面的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 叫什么名字?

1 回复 | 直到 7 年前

Shubham Gupta 8 年前

我认为这个测试用例是多余的,因为您将不得不模拟文档和呈现函数,所以基本上您正在测试的只是有条件的。但也可能有类似的用例。您应该对代码进行以下更改。

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

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

推荐文章

Ekaterina M · 如何使用Jest和测试库在JavaScript中进行单元测试?

3 年前

Gpack · 是否可以使用Jest收集vm.runInContext加载的代码的覆盖率?

3 年前

johann · 模拟“aws sdk”的“S3”功能(nodeJS和Jest)

4 年前

hikky36 · 为什么开玩笑。fn()可以分配给Typescript中的任何函数?

4 年前

kyrolos magdy · 用jest和

4 年前

Parth Chitroda · 无法读取未定义的属性“displayName”。反应+玩笑+酶

4 年前

Cazs · 在React onChange中测试功能组件

4 年前

Anshu Verma · 使用Jest和酶测试内部使用效果

4 年前

Kristesiashvili · 如果不能捕获源代码中的更改,那么用mock编写单元测试有什么意义呢?

4 年前

Alex Barbosa · 开玩笑说一个功能失败了,另一个功能却没有

4 年前