0

In old project I have react class component for listen key down. I try write 100% coverage test, but I don't understand how call e.isPropagationStopped

Detailed:

// my class component
class KeyListener extends Component {
  handleKeyDown = (e) => {
    if (e.isPropagationStopped && e.isPropagationStopped()) {
      console.log('THERE')
      return
    }
  }

  componentDidMount() {
    window.addEventListener('keydown', this.handleKeyDown, false)
  }

  render () {
    return null
  }
}

My jest don't 100% coverage example (react-testing-library)

import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import thunkMiddleware from 'redux-thunk';
import { render, screen, fireEvent } from '@testing-library/react';
import KeyListener from './KeyListener';

const mockStore = configureStore([thunkMiddleware]);
const store = mockStore({});


describe('test KeyListener', () => {
  test('test', () => {
    const keyButtonA = {
      key: 'a',
      keyCode: 65,
      which: 65,
      code: 'keyButtonA',
      location: 0,
      altKey: false,
      ctrlKey: false,
      metaKey: false,
      shiftKey: false,
      repeat: false,
    };

    render(
      <Provider store={store}>
        <HashRouter>
          <>
            <button
              onKeyDown={(e) => {
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();
              }}
            />
            <KeyListener keyCode={keyButtonA.keyCode} onKeyDown={() => {}} />
          </>
        </HashRouter>
      </Provider>,
    );

    const button = screen.getByRole('button');
    fireEvent.keyDown(button, keyButtonA);
    expect(button).toBeInTheDocument();
  });
});

What you need to write in this test to cover it 100%, or rather call the console.log('THERE')?

Roma N
  • 175
  • 11

0 Answers0