未找到事件的处理函数：“changeText”

Posted 2023-02-19

【中文标题】未找到事件的处理函数：“changeText”

【英文标题】：No handler function found for event: "changeText"

【发布时间】：2021-10-01 18:38:26

【问题描述】：

我是第一次尝试使用 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 |

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

来自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】：

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

您必须改用onChangeText。

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

【讨论】：

非常感谢。你是 100% 正确的。解决了。​​