@testing-library/react-native fireEvent为何未触发onChange函数？

你的问题核心在于React Native TextInput的事件类型不匹配：

• 组件里TextInput绑定的是onChange事件
• 测试代码调用的是fireEvent.changeText()，这个方法触发的是onChangeText事件，和onChange是完全独立的两个事件，因此mock函数不会被触发

修复方案（二选一即可） #

方案1：修改组件，使用onChangeText #

这是React Native处理输入文本更常用的方式，代码更简洁：

import {TextInput} from "react-native";

const Foo = (props) => {
    return <TextInput testID={"test"} onChangeText={() => props.onChange()} />
}

export default Foo;

方案2：修改测试代码，触发change事件 #

保持组件不变，调整测试里的事件触发方式，传入onChange要求的事件结构：

import { render, screen, fireEvent } from '@testing-library/react-native';
import Foo from "./foo";

test('onChange works properly', () => {
    const onChangeMock = jest.fn();
    render(<Foo onChange={onChangeMock} />)
    // 触发change事件，需传入包含nativeEvent的对象
    fireEvent.change(screen.getByTestId("test"), {
        nativeEvent: { text: 'myTest' }
    });
    expect(onChangeMock).toHaveBeenCalled();
})

补充说明 #

React Native TextInput的两个事件差异：

• onChange接收事件对象，文本内容在event.nativeEvent.text中
• onChangeText直接接收输入的文本字符串作为参数

若业务不需要事件对象的额外信息，优先用onChangeText更高效。

内容的提问来源于stack exchange，提问作者Daniel Long