Support DatePickerIOS

[rzane]

• react-native or expo: react-native
• native-testing-library version: ^4.0.7
• jest-preset: @testing-library/react-native
• react-native version: v0.60.4
• node version: v12.7.0

What you did:

I tried to write a test against a <DatePickerIOS />.

What happened:

An unexpected error occurred:

this._picker.setNativeProps is not a function

Reproduction:

import React from "react";
import { DatePickerIOS } from "react-native";
import { render, fireEvent, NativeTestEvent } from "@testing-library/react-native";

const Scenario = () => {
  const [date, onDateChange] = React.useState(new Date());

  return (
    <DatePickerIOS
      testID="date"
      date={date}
      onDateChange={onDateChange}
    />
  );
}

it('should not error', () => {
  const { getByTestId } = render(<Scenario />);

  const datePicker = getByTestId("date");
  const event = new NativeTestEvent("dateChange", new Date());

  expect(() => fireEvent(datePicker, event)).not.toThrowError();
});

it('should not error when providing `createNodeMock`', () => {
  const createNodeMock = jest.fn(element => ({
    setNativeProps: jest.fn()
  }));

  const { getByTestId } = render(<Scenario />, {
    options: { createNodeMock }
  });

  expect(createNodeMock).toHaveBeenCalled();
});

Problem description:

DatePickerIOS calls setNativeProps here:
https://github.com/facebook/react-native/blob/9bc77fadb6b4d51690c93744c02afe40eb6e63fc/Libraries/Components/DatePicker/DatePickerIOS.ios.js#L126

I tried to pass createNodeMock in through the options. I was hoping that by providing a mock forsetNativeProps, that it would work.

createNodeMock was never actually used by the react-test-renderer, though, so my idea didn't work 😦.

Suggested solution:

Maybe add a new mock for DatePickerIOS? 🤷‍♂

Can you help us fix this issue by submitting a pull request?

Probably!

[bcarroll22]

For historical context, the reason why this wasn't included was that the original plan was for DatePickerIOS to be taken out in the move to lean core. It looks like DatePickerIOS is still there in RN 60 though, so I'm not sure what the status of that plan is.

Because of that, I'm cool with DatePickerIOS being added to the valid components if you want to submit a PR for it 👍

I don't remember the specifics of it, but createNodeMock actually doesn't work with React Native. I don't recall why, I went down this rabbit hole once before, but it doesn't actually respect anything you pass in createNodeMock. That should probably just be removed from render because it's misleading. I almost want to say that the reason it doesn't work is that internally the react test renderer only allows createNodeMock on certain components (web ones, like div, span, etc.) or something like that.

[bcarroll22]

That said, the setNativeProps issue is still going to be a hard even if we add DatePickerIOS using the current mocking model. Since createNodeMock doesn't work, knowing what to do about imperative operations like this is very tough.

I've mentioned this in previous issues, I don't believe the jest preset included with this library is sophisticated enough to fully replicate the confidence of React Testing Library. I still believe the community should build a much more sophisticated set of mocks for all of the react native components that can handle those imperative operations like setNativeProps. That in itself should be a standalone package that can be used in conjunction with this library.

[henrikra]

Why you have to check that js api of DatePickerIOS works? We should trust that RN has tested their own components 👍

[rzane]

My goal was to test a component that uses a date picker. In order to do that, I need to be able to control the datepicker.

[thymikee]

FYI, this repository is no longer responsible for this package. See the migration guide to v7.0.