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')?