How to mock keypress event on Window object with Enzyme / Jest? - reactjs

Question

I am looking for a way to test my hook for React components:
export default function useKeyUp(key: Key, onKeyUp: Function) {
useEffect(() => {
const handleUp = (event: KeyboardEvent) => {
const { key: releasedKey } = event
if (key === releasedKey) {
if (onKeyUp) {
onKeyUp()
}
}
}
window.addEventListener('keyup', handleUp)
return () => {
window.removeEventListener('keyup', handleUp)
}
}, [key, onKeyUp])
}
How can I mock / simulate event fired on the Window object in Jest / Enzyme?

Answer 1

Since enzyme can't test react hook directly like react-hooks-testing-library. We can use the hook inside a component. Then, use mount to render the component.
Use keyboardEvent constructor to create a "keyup" event and dispatch the event via dispatchEvent web API.
E.g.
useKeyUp.ts:
import { useEffect } from 'react';
type Key = string;
export default function useKeyUp(key: Key, onKeyUp: Function) {
useEffect(() => {
const handleUp = (event: KeyboardEvent) => {
const { key: releasedKey } = event;
if (key === releasedKey) {
if (onKeyUp) {
onKeyUp();
}
}
};
window.addEventListener('keyup', handleUp);
return () => {
window.removeEventListener('keyup', handleUp);
};
}, [key, onKeyUp]);
}
useKeyUp.test.tsx:
import { mount } from 'enzyme';
import React from 'react';
import useKeyUp from './useKeyUp';
describe('70938281', () => {
test('should call onKeyUp callback', () => {
const mOnKeyUp = jest.fn();
function TestComp() {
useKeyUp('s', mOnKeyUp);
return null;
}
const wrapper = mount(<TestComp />);
const keyUpEvent = new KeyboardEvent('keyup', { key: 's' });
window.dispatchEvent(keyUpEvent);
expect(mOnKeyUp).toBeCalledTimes(1);
wrapper.unmount();
window.dispatchEvent(keyUpEvent);
expect(mOnKeyUp).toBeCalledTimes(1);
});
test('should NOT call onKeyUp callback', () => {
const mOnKeyUp = jest.fn();
function TestComp() {
useKeyUp('s', mOnKeyUp);
return null;
}
mount(<TestComp />);
const keyUpEvent = new KeyboardEvent('keyup', { key: 'a' });
window.dispatchEvent(keyUpEvent);
expect(mOnKeyUp).not.toBeCalled();
});
});
Test result:
PASS stackoverflow/70938281/useKeyUp.test.tsx (8.484 s)
70938281
✓ should call onKeyUp callback (29 ms)
✓ should NOT call onKeyUp callback (2 ms)
-------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------|---------|----------|---------|---------|-------------------
All files | 100 | 75 | 100 | 100 |
useKeyUp.ts | 100 | 75 | 100 | 100 | 9
-------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 8.937 s
jest.config.js:
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'enzyme',
setupFilesAfterEnv: ['jest-enzyme', 'jest-extended'],
setupFiles: ['./jest.setup.js'],
testEnvironmentOptions: {
enzymeAdapter: 'react16',
},
};