Component does not allow testID prop

[Elolawyn]

This component requires the addition of testID prop for at least both the TouchableOpacity button that opens the dropdown and each value inside dropdown to be able to trigger press events inside tests. Each option testID can be made with a callback that uses each available option like the callback rowTextForSelection.

That way, we will be able to test select in forms:

• find select touchable button.
• press it.
• find option inside select.
• press it.

[pierrezimmermannbam]

I have just tested adding a testID so that it is possible to open the dropdown but it doesn't work. If you look at how the openDropdown function is implemented, it opens the dropdown inside a callback passed to DropdownButton.current.measure:

const openDropdown = () => {
    dropdownButtonRef.current.measure((fx, fy, w, h, px, py) => {
      onDropdownButtonLayout(w, h, px, py);
      setIsVisible(true);
      onFocus && onFocus();
    });
  };

The thing is View is mocked in the react native preset and the measure method is just a jest.fn() that doesn't do anything (see the react native preset) so even if you can click on the button, calling openDropdown will do nothing.

If you need to test selection in an integration test I think the only solution right now would be to mock the whole library unfortunately

[ronilitman]

I was looking for this as well, and I found a workaround. you can use both renderCustomizedButtonChild and renderCustomizedRowChild to have your own version of the button and the row, and just add a testId on a wrapper component. For example:

<SelectDropdown
 renderCustomizedButtonChild={(selectedItem, index) => {
            return (
              <View testId={"dropdown-btn-test-id"}>
                {selectedItem ? (
<Text>Selected item - {selectedItem.name}</Text>
                ) : (
<Text>choose an option..</Text>
                )}
              </View>
            );
          }}>

See more examples here

[Elolawyn]

My workaround was to keep using the library as expected but adding testID and telling tipescript to ignore that non-allowed-prop error. Then I mocked the library for tests to substitute its content with Views, Text and Touchables (replicating the open/close functionality) that allowed the use of testID as needed.

[AdelRedaa97]

Added in v4.0 take a look at the changes made in v4.0 https://github.com/AdelRedaa97/react-native-select-dropdown?tab=readme-ov-file#-major-changes

Feel free to open the issue again if it still exists

[ArjunPatidarRadix]

Can anyone please guide me with proper steps to test the SelectDropdown component?