jest-example.js

// LoadingButton.tsx
import React from 'react'
import { Button } from 'Button'

const LoadingButton = (props) => {
  return <Button {...props} isLoading> loading... </Button>
}

// Button.tsx
import React from 'react'
import { LoadingButton } from 'LoadingButton'

const Button = (props) => {
  if (props.isLoading) {
      return <LoadingButton {...props} />
  }

  return (
      <button {...props}>
          {props.children}
      </button>
  )
}

// SaveButton.tsx
import React from 'react'
import { Button } from 'Button'

const SaveButton = (props) => {
  return <Button {...props}>Save</Button>
}

// CancelButton.tsx
import React from 'react'
import { Button } from 'Button'

const CancelButton = (props) => {
  return <Button {...props}>Cancel</Button>
}

//FormControls.tsx
import React from 'react'
import { SaveButton } from 'SaveButton'
import { CancelButton } from 'CancelButton'
import PropTypes from 'prop-types'
import fetch from 'fetch'

export const FormControls = (props) => {
  //...

  const handleOnClick = (onClick) => (event) {
    // some pre processing
    // maybe some network stuff with fetch
    return fetch('blah')
      .then(() => console.log('blah'))
      .then(() => onClick(event))
  }

  return (
    <div>
      <SaveButton 
        onClick={handleOnClick(props.onSave)} 
        isLoading={props.isLoading} />
      <CancelButton />
    </div>
  )
}

FormControls.propTypes = {
  isLoading: Proptypes.bool,
  onSave: Proptypes.func.isRequired
}

FormControls.defaultProps = {
  isLoading: false
}

//FormControl-spec.js
jest.mock('fetch', () => ({
  __esmodule: true,
  default: () => Promise.resolve()
}))


import { FormControls } from 'FormControls'
import { SaveButton } from 'SaveButton'
import { CancelButton } from 'CancelButton'
import { LoadingButton } from 'LoadingButton'
import { Button } from 'Button'
import { shallow } from 'enzyme'
import { expect } from 'chai'


describe('FormControl', () => {
  function subject(props) {
    return shallow(<FormControls {...props}/>)
  }

  let result

  beforeEach(() => {
    result = subject({ isLoading: false })
  })

  it('renders a save button first', () => {
    expect(result.find(Button).last().instance().type.name).to.equal('SaveButton')
  })

  it('renders a cancel button last', () => {
    expect(result.find(Button).last().instance().type.name).to.equal('CancelButton')
  })

  describe('when isLoading is false', () => {
    it('does not render a LoadingButton component', () => {
      expect(result).to.not.contain(<LoadingButton />)
    })
  })
  
  describe('when isLoading is true', () => {
    beforeEach(() => {
      result = subject({ isLoading: true })
    })

    it('does render a LoadingButton component', () => {
      expect(result).to.contain(<LoadingButton />)
    })
  })

  describe('when the save button is clicked', () => {
    let mockOnClick

    beforeEach(() => {
      mockOnClick = jest.fn()
      result = subject({ isLoading: false, onClick: mockOnClick })

      result.find(<SaveButton />)
        .simulate('click')
    })

    it('runs the provided onClick handler', () => {
      expect(mockOnClick).to.have.beenCalledTimes(1)
    })
  })
})