No handler function found for event: "changeText"

Viewed 832

I am trying out the React Native Testing Library with Expo / Jest for the first time.

Following the tutorials, I can get a simple button to work

test("Simple Button", () => {
  const mockFn = jest.fn();
  const component = render(<Button onPress={mockFn} title="bla" accessibilityLabel="bla" />);
  const button = component.getByLabelText("bla");
  expect(button).toBeDefined();
  fireEvent.press(button);
  expect(mockFn).toBeCalled();
});

with the correct expected output ✓ Simple Button (315ms)

However, trying the same with an input yields an error

test("Simple Input", () => {
  const mockFn = jest.fn();
  const component = render(<TextInput onChange={mockFn} accessibilityLabel="bla" />);
  const input = component.getByLabelText("bla");
  fireEvent.changeText(input, "userInput");
  expect(mockFn).toBeCalledWith("userInput");
});
Simple Input (3ms)

  ● Simple Input

    No handler function found for event: "changeText"

      16 |   const component = render(<TextInput onChange={mockFn} accessibilityLabel="bla" />);
      17 |   const input = component.getByLabelText("bla");
    > 18 |   fireEvent.changeText(input, "userInput");
         |             ^
      19 |   expect(mockFn).toBeCalledWith("userInput");
      20 | });
      21 |

I am super confused by this, already checked multiple examples from the getting started guides and other repos, but the code looks correct and very straightforward.

Relevant parts from package.json

...
 "jest": {
    "preset": "jest-expo",
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  },
...
  "dependencies": {
    "expo": "^42.0.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
...
},
  "devDependencies": {
    "@testing-library/jest-native": "^4.0.1",
    "@testing-library/react-native": "^7.2.0",
    "jest-expo": "~42.0.1",
    "react-test-renderer": "16.13.1",
...
}
1 Answers

The error occurs because there's no onChangeText callback in your TextInput so there's no handler to call when triggering fireEvent.changeText.

You have to use onChangeText instead.

<TextInput onChangeText={mockFn} accessibilityLabel="bla" />
Related