reactjs – Jest快照不能与某些Semantic-UI-React组件一起使用

当我尝试创建包含 Semantic-UI-React ‘Modal’组件的React组件“LoadingModal”的Jest快照时,快照最终为空,在.snap文件中为“null”.我已经测试了其他Semantic-UI-React组件的快照,例如’Button’,’Dropdown’和’Sidebar’,它们使用正确的html输出渲染和快照就好了.

这看起来不像Jest快照本身的问题,而是react-test-renderer,其.create()和.toJson()方法返回null.

为什么react-test-renderer会正确渲染一些Semantic-UI-React组件,而不是其他像’Modal’？ react-test-render似乎是为快照序列化React组件的标准方法,也是Jest’s snapshotting docs中使用的方法.

我使用的是react@16.2.0,jest @ 22.1.4,react-test-renderer @ 16.2.0和semantic-ui-react@0.77.1

更新：

看起来由于某种原因,Semantic-UI-React Modal组件特别设置为在浏览器中不呈现时呈现null.

有关更多信息,请参阅github repo上的我的issue.

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

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.')
})

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>
`;