import React from 'react' import pick from 'lodash.pick' import { fetchTrips } from '../../../../../api/trips' class TripListState extends React.Component { static defaultProps = { fetchTrips } state = { status: 'LOADING', filter: 'ALL' } async componentDidMount() { const trips = await this.props.fetchTrips('ALL') this.setState({ trips, status: 'READY' }) } handleChangeFilter = async filter => { this.setState({ filter, status: 'FILTERING' }) const trips = await this.props.fetchTrips(filter) this.setState({ trips, status: 'READY' }) } render() { return this.props.children({ ...pick(this.state, ['status', 'trips', 'filter']), onChangeFilter: this.handleChangeFilter, }) } } export default TripListState

import React from 'react' import { render, wait } from 'react-testing-library' import TripListState from './TripListState' describe('<TripListState>', () => { it('should fetch the trips on load', async () => { const children = jest.fn(() => null) const trips = [{ id: 1 }] // I pass this as a prop so I can avoid mocking the dependency const fetchTrips = x => Promise.resolve(trips) render( <TripListState children={children} fetchTrips={fetchTrips} /> ) // This works just fine expect(children).toHaveBeenCalledTimes(1) // This errors out expect(children).toHaveBeenCalledWith({ status: 'LOADING', filter: 'ALL', onChangeFilter: /* Not sure what to put here */ }) }) })