testing onClick with react-navigation - reactjs

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')
})

Answer 2

The prop navigation that is passed to the component is not a function. It's an object that contains a function called navigate.
Ironically, that's exactly what you're using in your component code:
const { navigate } = this.props.navigation;
And so, you'll have to change the navigation prop that you're passing from the test to be:
navigation: {navigate: jest.fn()}
and then in your test:
expect(props.navigation.navigate).toHaveBeenCalledTimes(1)
Edit:
In order to actually get the function to be called, you'll have to simulate a press. Right now the code finds the onPress function, but doesn't invoke it.
To do this you can replace
wrapper.find(ListItem).first().prop('onPress')
with
wrapper.find(ListItem).first().props().onPress()