使用 Jest 在 React Native 中测试 TextInput 的值变化

Question

我有一个TextInput组件，当自定义函数的值通过其onValueChange属性更改时，它会调用自定义函数。

是否可以使用 Jest 模拟此TexInput文本的变化，以便我测试是否使用正确的参数调用自定义函数(作为 prop 传递)并产生正确的结果？

Answer 1

是的，可以用玩笑和酶来实现。下面是搜索栏组件的定义，它接收一个函数作为道具。使用键入的文本调用该函数。

const SearchBar = ({onSearch}) => {
return (
<View>
<TextInput
onChangeText={text => onSearch(text)}
/>
</View>
);
};

测试可以按如下方式进行

const onSearch = jest.fn();
const wrapper = shallow(<SearchBar onSearch={onSearch} />);
wrapper.find('TextInput').simulate('changeText', 'test search text');
expect(onSearch).toHaveBeenCalledWith('test search text');