jeudi 23 mars 2017

How to mock a module with default and other exports with Jest?

I'm trying to mock react-bootstrap <Modal> component with jest. Here's a simple component using it:

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

And here's basic snapshot test for it:

// 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={() => ''}
      title='Title' />)
    expect(modal.toJSON()).toMatchSnapshot()
  })
})

And here's snapshot:

    // 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={undefined}
          >
            Ok
          </Button>
        </Modal.Footer>
      </div>
    </div>
    `;

I'm quite happy with the snapshot result, but I'd like to get better output for the <Modal> component itself so that the snapshot would contain also component's name (currenlty <div>) and props (currently no props shown).

How should the mocking be done to achieve this?

Aucun commentaire:

Enregistrer un commentaire