Mocking & monitoring Keyboard events with jest in react native

Question

Given the following code:

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();
}

Is there a correct way to mock the imported Keyboard component to both verify the listener subscription took place, and also to verify the dismiss() event was triggered?

Answer 1

So this problem was way more complex that I could imagine to solve at start. Since what you want to test here is dismiss() and show() basically for a keyboard right?

So the events and listeners by documentation for 0.63 and 0.62 is 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");
};

To get Jest to call the 2 functions _keyboardDidShow and _keyboardDidHide you will need to use Keyboard.emit('keyboardDidShow')

Example:

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
});

Not fully sure if this will ever help anyone. But that's how I solved this puzzle to figure out how to coverage the _keyboardDidShow and Hide

EDIT: For version 0.66 > now you need to do the following:

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

  // cleanup function
  return () => {
    kdh.remove();
    kds.remove();
  };
}, []);

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

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

Since they changed the way to make it subscription events from now on

And for the tests change the Keyboard.emit to:

Keyboard._emitter.emit('keyboardDidShow', {});
Keyboard._emitter.emit('keyboardDidHide', {});

And you should have everything you need to make it work in jest :)