React-native-testing-library: Select various segments on SegmentedControlIOS

[Noitidart]

Ask your Question

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>?

[brooksbecton]

I believe the event should be "onChange"

[brooksbecton]

import React from "react";
import { SegmentedControlIOS } from "react-native";
import { fireEvent, render } from "react-native-testing-library";

const testID = "SegmentedControl";
const stub = jest.fn();
const values = [{ label: "foo" }];
const { getByTestId } = render(
  <SegmentedControlIOS
    values={["foo", "bar"]}
    onChange={stub}
    testID={testID}
  />,
);
it("sends events", () => {
  fireEvent(getByTestId(testID), "onChange", {
    nativeEvent: {
      value: values[0],
      selectedSegmentIndex: 0,
    },
  });
});

[Noitidart]

Thank you! Will try that tongiht!

[Noitidart]

I forgot to say, it works! Thank you!