时间戳

首页 > 解决方案 > 找不到事件的处理函数：“changeText”

react-native - 找不到事件的处理函数：“changeText”

问题描述

我第一次尝试使用 Expo / Jest 的 React Native 测试库。

按照教程，我可以得到一个简单的按钮来工作

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();
});

具有正确的预期输出 ✓ Simple Button (315ms)

但是，尝试对输入进行相同操作会产生错误

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 |

我对此感到非常困惑，已经检查了入门指南和其他存储库中的多个示例，但是代码看起来正确且非常简单。

相关部分来自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",
...
}

标签： react-nativejestjsexporeact-native-testing-library

解决方案

发生错误是因为onChangeText您的中没有回调，TextInput因此在触发时没有要调用的处理程序fireEvent.changeText。

你必须onChangeText改用。

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

推荐阅读