如何使用 @testing-library/react-native 监视 React Native 中的 TouchableNativeFeedback onPress？

Question

请帮帮我...

我有一个 React Native 自定义 Button 组件，它接收 onPress 属性并将其传递给 TouchableNativeFeedback。我使用 @testing-library/react-native 进行单元测试。我尝试监视 onPress，以检查触摸 TouchableNativeFeedback 时是否会触发它。不知何故，当我模拟按钮上的按下事件时，不会调用间谍函数。我的实现有什么错误吗？

FI：此行为仅发生在 TouchableNativeFeedback 中，但与 Button 完美配合

这是我的实现：

按钮.js

const Button = ({onPress, label}) => (
  <TouchableNativeFeedback onPress={onPress} testID="button">
    <View style={someStyling}>
      <Text>{label}</Text>
    </View>
  </TouchableNativeFeedback>
)

export default Button

按钮.test.js

  it("Fire onPress props when button pressed", () => {
    const mockFn = jest.fn();

    const { getByTestId } = render(<Button onPress={mockFn} />);
    const button = getByTestId("button");
    
    fireEvent.press(button);
    
    expect(mockFn).toHaveBeenCalled();
  });

Answer 1

我遇到过同样的问题。

为我解决这个问题的是我的TouchableXXX组件是从
react-native-gesture-handler. dependency该库可能是由我的依赖项之一导入的。我想当我编写它时，TouchableXXX它是由我的 IDE 自动从那里导入的。
将语句更改import为导入后react-native- 在测试中一切都对我有用。
所以最终我的改变是这样的：

import { TouchableHighlight } from 'react-native-gesture-handler'

对此

import { TouchableOpacity } from 'react-native'