testing onClick with react-navigation

Question

I'm using Jest with Enzyme, and I have this component which includes a navigate method call:

export class LeadList extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <List>
        {this.props.data.allLeads.map((lead, i) => {
          return (
            <ListItem
              key={i}
              onPress={() =>
                navigate('Details', lead.id)
              }
            />
            // ...
            </ListItem>
          )})}
      </List>
    );
  }
}

I'm trying to test that it gets called properly, so I threw this together:

const testProps = props => ({
  data: {
    allLeads: [
      {id: 1, name: 'John Doe'},
      {id: 2, name: 'Jane Doe'}
    ],
    loading: false,
  },
  navigation: jest.fn((options, callback) => callback('Details', 1)),
  ...props,
})
describe('interactions', () => {
  let props
  let wrapper
  beforeEach(() => {
    props = testProps()
    wrapper = shallow(<LeadList {...props} />)
  })
  describe('clicking a lead', () => {
    beforeEach(() => {
      wrapper.find(ListItem).first().prop('onPress')
    })
    it('should call the navigation callback', () => {
      expect(props.navigation).toHaveBeenCalledTimes(1)
    })
  })
})

Output is:

Expected mock function to have been called one time, but it was called zero times.

What's the right way to handle this? Do I need to use a spy?

EDIT:

I'm getting the same when I change it like so:

const testProps = props => ({
  // ...
  navigation: {navigate: jest.fn()},
  ...props,
})

it('should call the navigation callback', () => {
  expect(props.navigation.navigate).toHaveBeenCalledTimes(1)
})

Output:

expect(jest.fn()).toHaveBeenCalledTimes(1)

Expected mock function to have been called one time, but it was called zero times.

  at Object.<anonymous> (__tests__/LeadList-test.js:48:35)
  at tryCallTwo (node_modules/promise/lib/core.js:45:5)
  at doResolve (node_modules/promise/lib/core.js:200:13)
  at new Promise (node_modules/promise/lib/core.js:66:3)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
  at tryCallOne (node_modules/promise/lib/core.js:37:12)
  at node_modules/promise/lib/core.js:123:15

Answer 1

You will need a spy to test this. Here is an example test for finding the ForgotPassword button on a LoginScreen and testing that it navigates to the correct screen.

test('Press Forgot Password Button', () => {
  const spy = jest.spyOn(navigation, 'navigate')
  const wrapper = shallow(
    <LoginScreen
      navigation={navigation}
      error={{}}
      onLogin={jest.fn()}
    />,
  )
  const forgotButton = wrapper.find('Button').at(0)
  forgotButton.props().onPress()

  expect(spy).toBeCalledWith('ForgotPassword')
})