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

【问题标题】：Using Jest to mock a component which has other components as properties使用 Jest 模拟具有其他组件作为属性的组件
【发布时间】：2018-03-19 21:31:12
【问题描述】：

我正在尝试用玩笑来模拟 react-bootstrap <Modal> 组件。 <Modal> 包含一些“子组件”作为属性，例如 <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> 组件本身获得更好的输出，以便快照还包含组件的名称（当前 <div>）和道具（目前没有道具显示）。

应该如何进行模拟来实现这一点？

【问题讨论】：

你能不能试着让你Modal函数只返回字符串Modal，这就是我正常模拟组件的方式。
是的，我先尝试过，但由于某种原因它失败并显示错误消息：Invariant Violation: Modal(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object。此错误可能与props.children 的处理有关，因为我的问题中提出的模拟不会失败..
所以也许返回一个返回Modal的函数应该可以工作。
不确定我是否理解正确。我尝试了这两种方法，导致相同的错误消息：function Modal(props) { return 'Modal' } 和 function Modal(props) { return () => 'Modal' }

标签： unit-testing reactjs testing snapshot jestjs

【解决方案1】：

我找不到通过玩笑来实现这一点的方法。最后我使用了酶浅渲染，它处理了开箱即用的基本模拟。为了进行 spanshot 匹配，我使用 enzyme-to-json npm 包对酶包装器进行了序列化。

【讨论】：