Question

我试图用jest模拟react-bootstrap <Modal>组件。 <Modal>包含一些＆＃34;子组件＆＃34;作为属性，例如<Modal.Header>。我试图找出使用Jest模拟这种组件的正确方法。

这是一个使用<Modal>的简单组件：

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

我对快照结果非常满意，但我希望为<Modal>组件本身获得更好的输出，以便快照还包含组件的名称（currenlty） <div>）和道具（目前没有道具）。

如何进行嘲弄才能实现这一目标？

Answer 1

我无法通过开玩笑嘲笑来实现这一目标。最后，我选择了浅层渲染，它处理了基本的模拟开箱。为了进行spanshot匹配，我使用enzyme-to-json npm包序列化酶包装。

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

1 个答案: