当用条件包装了ReactDOM.render时,如何用Jest进行测试?

时间:2018-09-22 18:59:14

标签: javascript reactjs jestjs

我具有以下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 个答案:

答案 0 :(得分:1)

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

config.sign_out_via =: get => config/initializers/devise.rb

通过进行此更改,我们将能够编写干净的测试并仅独立测试这段代码。以下是对我有用的测试案例。必须模拟ReactDOM.render和document.getElementById才能使测试用例正常工作。

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

以下是代码沙箱链接,您可以在其中看到此测试正在运行,并且测试用例正在通过。 https://codesandbox.io/s/7wr0k7qmq