Jest snapshots do not work with some Semantic-UI-React components

Question

When I try to create a Jest snapshot of my React 'LoadingModal' component that contains the Semantic-UI-React 'Modal' component, the snapshot ends empty, with 'null' inside the .snap file. I tested snapshots of other Semantic-UI-React components, such as 'Button', "Dropdown" and "Sidebar", rendering and snapshot with the correct html output.

This doesn't seem to be a problem with the Jest photo itself, but rather a response-test-renderer with its .create () and .toJson () returning zero.

Why does the rendering agent-handler correctly display some components of the Semantic-UI-React, but not the same as the "Modal"? response-test-render is apparently the standard method for serializing React components for a snapshot and is the method used in destruction demos .

I use response@16.2.0 , jest@22.1.4 , react-test-renderer@16.2.0 and semantic-ui-react@0.77.1

---

Update:

It seems that for some reason, the Semantic-UI-React Modal component, in particular, is set to render null when it is not displayed inside the browser.

See my issue in the github repository for more info .

---

LoadingModal.test.js

import React from 'react'
import renderer from 'react-test-renderer'
import LoadingModal from './LoadingModal'

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

LoadingModal.test.js.snap

// Jest Snapshot v1

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

LoadingModal.js

import React from 'react';
import PropTypes from 'prop-types'

import { Modal, Dimmer, Loader} from 'semantic-ui-react'

class LoadingModal extends React.Component {
    static propTypes = {
        header: PropTypes.func,
        content: PropTypes.func,
        loading: PropTypes.bool,
        onClose: PropTypes.func,
        size: PropTypes.string,
        height: PropTypes.string
    };
    static defaultProps = {
        size: 'tiny',
        height: '500px'
    }

    _render_content = (content) => {
        if (this.props.loading === true) {
            return <Dimmer active inverted><Loader active size='large' inline='centered'/></Dimmer>
        } else {
            return content && content()
        }
    }

    render () {
        const {
          header,
          content,
          loading,
          onClose,
          size,
          height
        } = this.props;

        return (
            <Modal size={size} dimmer='blurring' open={true} onClose={onClose}>
              {header && header()}
              <Modal.Content>
                <div style={{height: height}}>
                    {this._render_content(content)}
                </div>
              </Modal.Content>
            </Modal>
        );
    }
}

export default LoadingModal

Answer 1

, , . jsdom.

, ​​jsdom, react-test-renderer jsdom , window document.

, Semantic-UI-React - null. , Portal document.body node.

-UI-React

, Semantic-UI-React :

it('renders child components', () => {
  const child = <div data-child />
  wrapperMount(<Modal open>{child}</Modal>)

  document
    .querySelector('.ui.modal')
    .querySelector('[data-child]')
    .should.not.equal(null, 'Modal did not render the child component.')
})

DOM css , react-test-renderer enzyme document.body.

, react-test-renderer enzyme, , ! jest.mock, Portal , document.body node.

import React from 'react';
import renderer from 'react-test-renderer';
import Portal from 'semantic-ui-react/dist/commonjs/addons/Portal/Portal';
import { Modal } from 'semantic-ui-react';

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

describe('<Modal />', () => {
  test('snapshot', () => {
    const tree == renderer.create(<Modal open>Inside my modal!</Modal>).toJSON();

    expect(tree).toMatchSnapshot();
  });
});

:

exports[`<CaptureModal /> snapshot 1`] = `
<div
  className="ui modal transition visible active"
  style={
    Object {
      "marginTop": undefined,
    }
  }
>
  Inside my modal!
</div>
`;