模拟和监视键盘事件，并在本地进行响应

Question

给出以下代码：

import { Keyboard } from 'react-native';

// ....

componentDidMount() {
  this.keyboardShowListener = Keyboard.addListener(
    'keyboardWillShow',
    () => this.setState({ visible: true }),
  );
  this.keyboardHideListener = Keyboard.addListener(
    'keyboardWillHide',
    () => this.setState({ visible: false }),
  );
}

// ....

onCancel() {
  const { clearActiveInput } = this.props;
  clearActiveInput();
  Keyboard.dismiss();
}

有没有一种正确的方法来模拟导入的Keyboard组件，以验证发生了侦听器订阅，并且还验证了dismiss()事件已触发？

Answer 1

所以这个问题要复杂得多，我可以想象在开始时解决。由于您要在这里测试的是dismiss() 和show() 基本上是针对键盘的，对吗？

因此，0.63 和 0.62 文档中的事件和侦听器是https://reactnative.dev/docs/keyboard#docsNav

useEffect(() => {
   Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
   Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

   // cleanup function
   return () => {
       Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
       Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
   };
}, []);

const _keyboardDidShow = () => {
    alert("Keyboard Shown");
};

const _keyboardDidHide = () => {
    alert("Keyboard Hidden");
};

要让 Jest 调用这两个函数_keyboardDidShow，_keyboardDidHide您需要使用Keyboard.emit('keyboardDidShow')

例子：

it('Test Keyboards keyboardDidShow is called', () => {
    const { getByTestId } = render(<Container />);
    act(() => {
        Keyboard.emit('keyboardDidShow', {});
    });
    const box = getByTestId('TEST');
    //Do here your expect clauses to check if something changed in your container
});

不完全确定这是否会帮助任何人。但这就是我解决这个难题以弄清楚如何覆盖 _keyboardDidShow 和 Hide 的方法