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

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

jestjs reactjs javascript

bert · 技术社区 · 7 年前

我有下面的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 7 年前

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前