在 Jest 中模拟异步动作创建者

Question

I am fetching some data from API at componentDidMount in my react container, this is how the code structure is:

export class MainContainer extends Component {
  render() {
    const { props } = this
    const { isFetching, userInfo } = props

    return (
      isFetching
        ? <Loading pageName={'Home Page'} />
        : <div>
          {userInfo 
            && <div>
              <p>{`Name : ${userInfo.name}`}</p>
              <p>{`Email : ${userInfo.email}`}</p>
            </div>
          }
        </div>
    )
  }

  componentDidMount() {
    const { props } = this
    const { userLogin } = props

    // This is an async action creator, came in props by
    // `mapDispatchToProps`
    userLogin()
  }
}

/**
 * Maps dispatch and action ceators to render method
 * @param  {function} dispatch  store's dispatch method
 * @return {object}             action creators in object
 */
function mapDispatchToProps(dispatch) {
  // userActionCreators has userLogin method
  return bindActionCreators(userActionCreators, dispatch)
}

function mapStateToProps({ user }) {
  const { isFetching, error, userInfo } = user

  return {
    userInfo,
    isFetching,
    error
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MainContainer)

I recently have started adding unit tests to my code, I am using Jest and Enzyme. When I run tests I am getting this error:

TypeError: userLogin is not a function

I know I need to mock userLogin function, but I am not sure how to pass it on to the container in test file. This how my test file looks:

import React from 'react'
import renderer from 'react-test-renderer'
import configureStore from 'redux-mock-store'
import { shallow } from 'enzyme'

import { initialState } from '$REDUX/modules/user'
import ConnectedMainContainer, { MainContainer } from './MainContainer' 

// Snapshot matching for Main Container
describe('MainContainer Snapshot', () => {
  const mockStore = configureStore()
  let store, container

  beforeEach(() => {
    store = mockStore(initialState)
    container = shallow(<MainContainer store={store} />)
  })

  it('Matches the snapshot', () => {
    const tree = renderer.create(<MainContainer />).toJSON()

    expect(tree).toMatchSnapshot();
  })
})
// *************************************************************

Please let me know what am I missing here.

Answer 1

The easiest way would be to just pass it in in the shallow call.

describe('MainContainer Snapshot', () => {
  const mockStore = configureStore()
  let store, container, userLogin

  beforeEach(() => {
    userLogin = jest.fn()
    store = mockStore(initialState)
    container = shallow(<MainContainer store={store} userLogin={userLogin} />)
  })

  it('Matches the snapshot', () => {
    expect(container).toMatchSnapshot();
  })

  it('logs in the user', () => {
    expect(userLogin).toHaveBeenCalled();
  })

})