使用Jest和酶对AntD Modal进行单元测试

Question

我正在尝试使用Jest和Enezym在React中对AntD模态进行单元测试，这给了我以下错误：

和另一个

这也：    永久违规：对象作为React子对象无效（找到：键为{destroy，update}的对象）。如果要渲染子级集合，请改用数组。

这是我创建的模式

import propTypes from 'prop-types';
import { Modal } from 'antd';

const SuccessModal = props => {
const { title, content } = props;
return Modal.success({
title,
content,
});
   };

SuccessModal.propTypes = {
title: propTypes.string.isRequired,
content: propTypes.string.isRequired,
  };
  export default SuccessModal;

这是我的单元测试

import React from 'react';
import { shallow } from 'enzyme';
import SuccessModal from './index';

describe('SuccessModal', () => {
  it('should render the component correctly in ', () => {
    shallow(<SuccessModal title="time to succeed" content="sucess content        success content" />);
  });
  it('check the props values', () => {
    const props = {
      title: 'this is a success title',
      content: 'sucess content sucess content',
    };

    const renderedComponent = shallow(<SuccessModal {...props} />);
    expect(renderedComponent.prop('title')).toBe('this is a success title');
    expect(renderedComponent.prop('content')).toBe('sucess content sucess content');
  });
});

我也尝试过这种方式

  expect(

        (      
    <SuccessModal title="this is a success title" content="sucess content sucess content" />
  ).exists(),
).toEqual(true);
expect((   <SuccessModal title="this is a success title" content="sucess content sucess content" />).text()).toContain('this is a success title');

高度赞赏的任何帮助，如果需要更多说明，请在评论中让我知道

Answer 1

由于这个问题是在大约2年前提出的，所以我想使用antd 3.x

Modal.success返回对象{destroy，update}，因此出现相应的错误： “不变违反：对象作为React子对象无效（找到：具有键{destroy，update}的对象）...”

在这里，您需要使用一种声明性方法：

const SuccessModal = props => {
    const {title, content} = props;
    return (
        <Modal title={title}> 
            {content}
        </Modal>
    );
};

然后测试您的需求。

或像函数一样调用SuccessModal。

SuccessModal(props);

作为函数调用时，模态会在div标记内作为单独的body创建。因此，要检查呼叫的正确性，必须检查DOM

expect(document.documentElement.outerHTML).toContain(props.title);