使用Jest模拟具有其他组件作为属性的组件

Question

我正在尝试模拟react bootstrap

下面是一个使用

// mymodal.js

import React from 'react'
import {Modal, Button} from 'react-bootstrap'

const MyModal = ({ visible, hide, title, onOk }) =>
  <Modal show={visible} onHide={hide}>
    <div className='simple-modal'>
      <Modal.Header closeButton>{title}</Modal.Header>
      <Modal.Body>
        <div>I'm body</div>
      </Modal.Body>
      <Modal.Footer>
        <Button className='invert-primary' onClick={hide}>
          Cancel
        </Button>
        <Button bsStyle='primary' onClick={onOk}>
          Ok
        </Button>
      </Modal.Footer>
    </div>
  </Modal>

export default MyModal

下面是它的基本快照测试：

// mymodal.test.js

import renderer from 'react-test-renderer'
import * as React from 'react'
import MyModal from './mymodal'

jest.mock('react-bootstrap', () => {
  function Modal(props) {
    return <div>{props.children}</div>
  }
  Modal.Header = 'Modal.Header'
  Modal.Body = 'Modal.Body'
  Modal.Footer = 'Modal.Footer'

  return({
    Modal: Modal,
    Button: 'Button',
  })
})

describe('MyModal component', () => {
  test('should render a modal', () => {
    const modal = renderer.create(<MyModal
      visible={true}
      hide={() => ''}
      onOk={() => ''}
      title='Title' />)
    expect(modal.toJSON()).toMatchSnapshot()
  })
})

下面是快照：

    // Jest Snapshot v1

    exports[`MyModal component should render a modal 1`] = `
    <div>
      <div
        className="simple-modal"
      >
        <Modal.Header
          closeButton={true}
        >
          Title
        </Modal.Header>
        <Modal.Body>
          <div>
            I'm body
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button
            className="invert-primary"
            onClick={[Function]}
          >
            Cancel
          </Button>
          <Button
            bsStyle="primary"
            onClick={[Function]}
          >
            Ok
          </Button>
        </Modal.Footer>
      </div>
    </div>
    `;

我对快照结果很满意，但是我想为获得更好的输出

如何通过模仿来实现这一点？




Answer 1

我找不到通过开玩笑来达到这个目的的方法。最后，我使用了Ezyme浅层渲染，它处理基本的开箱模拟。为了进行spanshot匹配，我使用enzyme-To-jsonnpm包序列化了酶包装。