Jest test failing when i try to set a state - react-native

Question

I am trying to write some tests for a component i have written. It is a date/time component where by when you set a date from a calender, it sets the date to its local state, and then moves to a time selection component.
While this all works perfectly as a component, i cant seem to get th tests to pass. Currently having a problem with setting state in a jest test.
The test is as follows:
it('Time picker should appear', () => {
const navigation = {
navigate: jest.fn(),
};
const output = shallow(<DateTimePicker navigation={navigation} />);
const date = new Date('January 31 2018 12:30');
output.setState({selectedDate: date});
expect(output).toMatchSnapshot();
});
code of component is as follows:
import React from 'react';
import { View } from 'react-native';
import { injectIntl, FormattedMessage } from 'react-intl';
import { DatePicker } from '../../components/DatePicker';
import TimePicker from '../../components/TimePicker';
import Text from '../../components/Text';
import { propTypes } from './prop-types';
import styles from './styles';
export class DateTimePicker extends React.Component {
state = {
selectedDate: '',
}
confirmDateAndTime = (hours, minutes) => {
const { selectedDate } = this.state;
const date = new Date(selectedDate);
date.setHours(hours);
date.setMinutes(minutes);
const { navigation } = this.props;
/**
* navigate back to booking flight edit with the updated
* date selection.
*/
navigation.navigate('BookingFlightEdit', date);
}
render() {
const { selectedDate } = this.state;
/**
* if date has been selected - move onto the time selection
*/
if(selectedDate.length>0) {
return (
<View>
<View>
<Text style={styles.title} type="h1">
<FormattedMessage
defaultMessage="Select Time"
id="date_time_picker.select_time"
/>
</Text>
</View>
<View style={styles.time}>
<TimePicker
testID='time-button'
onPress={(hh,mm) => this.confirmDateAndTime(hh, mm)}
/>
</View>
</View>
);
}
return (
<View>
<Text style={styles.title} type="h1">
<FormattedMessage
defaultMessage="Select Date"
id="date_time_picker.select_date"
/>
</Text>
<DatePicker
testID = 'date-button'
onDayPress={(date) => this.setState({selectedDate: date.dateString})}
/>
</View>
);
}
}
DateTimePicker.propTypes = propTypes;
export default injectIntl(DateTimePicker);
however, whenever i run the test, iget the following error;
ShallowWrapper::setState() can only be called on class components

Answer 1

Your class is wrapped by injectIntl. This is the direct cause of the error you're encountering, as the internals of injectIntl are not a class. You will want to test an instance of your DateTimePicker class that is not wrapped by this Higher-Order component. You can do this by calling .dive() on the Enzyme wrapper.
it('Time picker should appear', () => {
const navigation = {
navigate: jest.fn(),
};
const output = shallow(<DateTimePicker navigation={navigation} />);
const date = new Date('January 31 2018 12:30');
const datePicker = output.dive();
datePicker.setState({selectedDate: date});
expect(datePicker).toMatchSnapshot();
});