Skip to content
This repository was archived by the owner on Jul 30, 2020. It is now read-only.

Support DatePickerIOS #49

Closed
rzane opened this issue Aug 2, 2019 · 5 comments
Closed

Support DatePickerIOS #49

rzane opened this issue Aug 2, 2019 · 5 comments
Labels
enhancement New feature or request

Comments

@rzane
Copy link

rzane commented Aug 2, 2019

  • 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 bcarroll22 added the enhancement New feature or request label Aug 7, 2019
@bcarroll22
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link

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

@rzane
Copy link
Author

rzane commented Oct 24, 2019

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
Copy link
Contributor

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants