Datetimepicker: Testing with Jest

[mtakac]

Question

I am having hard times trying to figure out how to write tests for forms using the datetime picker component and I couldn't really find any examples online. Wouldn't it be useful to include a simple example in the docs? I am using jest and react-native-testing-library. The problem is that every time I open the datetime picker in my tests it throws an error: TypeError: this._picker.current.setNativeProps is not a function.

I am not really sure if I can mock this call out or what the recommended approach would be.

[luancurti]

@mtakac Can you provide a example of test that you are facing this issue?

[jaimepater]

I have the same issue
This is mi test example

const timePicker = await component.findByTestId('dateTimePicker');
fireEvent(timePicker, 'onChange', { nativeEvent: { timestamp: today } });

And I getting the same error TypeError: this._picker.current.setNativeProps is not a function
can someone provide us simple example of a unit test ?

[jaimepater]

If someone else has this issue , I had to mock it but it works fine for me

jest.mock('@react-native-community/datetimepicker', () => jest.fn());
RNDateTimePicker.mockImplementation((props) => (
  <Input testID={props.testID} onFocus={() => props.onChange} />
));

I hope that this can help

[tills98]

If someone else has this issue , I had to mock it but it works fine for me

jest.mock('@react-native-community/datetimepicker', () => jest.fn());
RNDateTimePicker.mockImplementation((props) => (
  <Input testID={props.testID} onFocus={() => props.onChange} />
));

I hope that this can help

I've tried that fix but I got the following error:

TypeError: _datetimepicker.default.mockImplementationOnce is not a function

With the following code:

import RNDateTimePicker from '@react-native-community/datetimepicker';
//...
        it.only('should fire onChange with new date', async () => {
            jest.mock('@react-native-community/datetimepicker', () => jest.fn());
            RNDateTimePicker.mockImplementation((props) => <View testID={props.testID} />);

            const handleChangeDate = jest.fn();

            // render component
            const { getByTestId, getByText, debug } = render(
                <NoHyphenatedTextProvider>
                    <DatePickerInput
                        value={new Date('2020-03-04')}
                        label={'Datum'}
                        onChangeDate={handleChangeDate}
                    />
                </NoHyphenatedTextProvider>
            );
            // ...
        });

Do you have any idea to solve this issue?

[jaimepater]

Sorry for the delay @tills98

Try to move

 jest.mock('@react-native-community/datetimepicker', () => jest.fn());
            RNDateTimePicker.mockImplementation((props) => <View testID={props.testID} />);

After you imports ( I mean outside of your it and/or describe )

[mehmetnyarar]

In your setup file:

//  I use expo v39, therefore I use `@react-native-community/datetimepicker`
jest.mock('@react-native-community/datetimepicker', () => {
  const React = require('React')
  const RealComponent = jest.requireActual(
    '@react-native-community/datetimepicker'
  )

  class Picker extends React.Component {
    render () {
      return React.createElement('Picker', this.props, this.props.children)
    }
  }

  Picker.propTypes = RealComponent.propTypes
  return Picker
})

Your test:

const picker = await findByA11yLabel('picker')
fireEvent(picker, 'onChange', null, date)
expect(picker.props.value).toEqual(date)

Original solution from @react-native-community/picker
Related documentation

[Andarius]

FYI this works to mock (https://jestjs.io/docs/en/tutorial-react-native#mock-native-modules-using-jestmock)

jest.mock('@react-native-community/datetimepicker', function () {
    const mockComponent = require('react-native/jest/mockComponent')
    return mockComponent('@react-native-community/datetimepicker')
})

[vonovak]

hello 🙂
it would be nice if someone could contribute a testing guide for this library.

in the meantime, please refer to the testing suite of this project: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/test/index.test.js