fireEvent on SegmentedControlIOS

Question

I am using react-native-testing-library - https://callstack.github.io/react-native-testing-library/docs/getting-started

I have a <SegmentedControlIOS> - https://facebook.github.io/react-native/docs/segmentedcontrolios

I want to pres the first segment. I am doing this:

const testID = "SegmentedControl";
const stub = jest.fn();
const values = [{ label: "foo" }];
const { getByTestId } = render(
  <SegmentedControlIOS values={['foo', 'bar']} onChange={stub} testID={testID} />
);

expect(() => {
  getByTestId(testID);
}).not.toThrow();

fireEvent(getByTestId(testID), "change ", {
  nativeEvent: {
    value: values[0],
    selectedSegmentIndex: 0,
  },
});

However I get the error:

No handler function found for event: "change "

Screenshot below. Anyone know how to press different segments in <SegmentedControlIOS>?

Answer 1

fireEvent(element: ReactTestInstance, eventName: string, ...data: Array): void

The change function is located in the fireEvent object. Here's how to use it:

Version 5 or later:

fireEvent.change(getByTestId(testID), { target: { value: values[0],selectedSegmentIndex: 0 } });

Version 5 or before:

const input = getByTestId(testID);
  input.value = values[0];
  input.selectedSegmentIndex = 0;
  fireEvent.change(input);

If you want to check the onChange function of SegmentedControlIOS,

using fireEvent with native events that aren't already aliased by the fireEvent api.

// you can omit the `on` prefix
fireEvent(getByTestId(testID), 'onChange');