Add support for Jest and @testing-library/react-native library

[amwebexpert]

    How can we leverage the testID functionality added in v5.2 for a Dropdown Picker item to simulate a test environment to click on the Dropdown picker and select a different item?

We tried to add a testID for all our Dropdown Picker items and then tried to retrieve them based on the testID using getByTestID method in the @testing-library/react-native library - however the test was not able to find the Dropdown picker item.

Any code example/snippet for this would be much appreciated.

Originally posted by @sagupta1001 in https://github.com/hossein-zare/react-native-dropdown-picker/issues/127#issuecomment-999718015

[JSONRice]

    How can we leverage the testID functionality added in v5.2 for a Dropdown Picker item to simulate a test environment to click on the Dropdown picker and select a different item?

We tried to add a testID for all our Dropdown Picker items and then tried to retrieve them based on the testID using getByTestID method in the @testing-library/react-native library - however the test was not able to find the Dropdown picker item.

Any code example/snippet for this would be much appreciated.

Originally posted by @sagupta1001 in #127 (comment)

@amwebexpert where you able to figure out a solution? I'm having the same problem. I can't seem to retrieve the item based on the testID and really need this for code coverage. @hossein-zare any thoughts on this one?

[amwebexpert]

@jasonwr Unfortunately no... I'm just hoping 🤞 one of the contributors have some spare time to add this feature

[JSONRice]

@jasonwr Unfortunately no... I'm just hoping 🤞 one of the contributors have some spare time to add this feature

Ok I figured out the problem (at least part of it). The testID for each dropdown item shows up once the dropdown is in an open state. Just trying to figure out how to tell the dropdown to be open because I tried this:

    const firstSeen = screen.getByTestId(
      'history-primary-care-add-provider-first-seen',
    );

    fireEvent.press(firstSeen);

I'm not sure what to do at this point as the DropDownPicker has the setOpen prop.

[JSONRice]

@amwebexpert ok after putting this line in it's now working (tests are finally passing):

onPress={setFirstSeenOpen}

@hossein-zare IMHO this is a bit redundant and a potential bug because the following is a required prop and what I had originally (and that's not working):

setOpen={setFirstSeenOpen}

Perhaps I'm not understanding something here. I'd be happy to setup a Zoom call to go over this solution. This is for my work so I can't post much here.

EDIT: This is a temporary solution because memoization doesn't cause another re-render since the value being set isn't changing.

[catalinberta]

I was confused by most solutions here but after trying out I finally understood that:

• whatever function you assign to setOpen={} to open the dropdown (which is usually just a function that updates the open state), also set it to onPress. Otherwise, simulating press in tests won't work/won't open the dropdown.

So you end up with something like

<Dropdown
...
setOpen={setStateToOpen}
onPress={setStateToOpen}
...
/>

• only after opening the dropdown, you can then select its items, which can also have a testID by assigning it to the item object. Meaning, besides value and label, also assign testID

e.g.

items = {[
{
  value: "val1",
  label: "label1",
  testID: "dropdownItem"
},
{
  value: "val2",
  label: "label2",
  testID: "dropdownItem"
}
]}

And then you can press them to select a value in tests

[harshilparmar]

@jasonwr Unfortunately no... I'm just hoping 🤞 one of the contributors have some spare time to add this feature

Ok, let me try.