Semantic-ui-react: Modal renders null when snapshotted with react-test-renderer/Jest

[scherroman]

Steps

LoadingModal.test.js

import React from 'react'
import renderer from 'react-test-renderer'
import { Modal } from 'semantic-ui-react'

test('should render correctly', () => {
    const tree = renderer.create(
        <Modal></Modal>
    ).toJSON()
    expect(tree).toMatchSnapshot()
})

LoadingModal.test.js.snap

// Jest Snapshot v1

exports[`should render correctly 1`] = `null`;

Expected Result

Modal renders normally when snapshotted with react-test-renderer and Jest

Actual Result

Modal renders null when snapshotted with react-test-renderer and Jest

Version

I am using [email protected], [email protected], [email protected], and [email protected]

Testcase

This doesn't look like its an issue with Jest snapshotting itself, but rather react-test-renderer with its .create() and .toJson() methods returning null.

After looking through the changelog, it looks like this line below in Modal.js is the culprit, causing the Modal to render null when it is not rendered inside a browser. What is the purpose of short circuiting like this unless rendered inside a browser? No other components seem to do this.

// Short circuit when server side rendering
if (!isBrowser()) {
    return isValidElement(trigger) ? trigger : null
}

See my stack overflow post on this issue for more context

[layershifter]

This line solved problems with SSR rendering, see #2259 for more context.

However, you can unblock this condition, see how it done in our tests.

[andrewferk]

The #2259 isBrowser change did not fix the issue. Even if you run the snapshot test with jsdom, <Modal /> still renders null. This is because of the <Portal /> component and the rendering happening on document.body.

I ended up solving this by mocking the Portal component.

jest.mock('semantic-ui-react/dist/commonjs/addons/Portal/Portal', () => ({ children }) => children);

I posted more of an explanation on stackoverflow. I'm so excited that I thought about this, because now I can use 'react-test-renderer' and enzyme to actually test modals now.