reactjs - 在 useEffect 中的酶/玩笑中测试事件监听器
问题描述
我的一个组件中有一段代码如下,如果用户使用 ESCAPE 键,模式将关闭:
React.useEffect(() => {
function keyListener(e) {
if (e.key === 'Escape' || e.keyCode === escapeKey || e.which === escapeKey) {
props.toggleShowModal();
}
}
document.addEventListener('keydown', keyListener);
return () => document.removeEventListener('keydown', keyListener);
});
我尝试以多种方式对此进行测试,但没有任何效果,我尝试的最后一件事是:
test('it calls the dismiss callback on ESC key', () => {
global.document.addEventListener = jest.fn();
const wrapper = mount(
<Modal
toggleShowModal={jest.fn()}
/>
);
expect(global.document.addEventListener).toHaveBeenCalled();
const KEYBOARD_ESCAPE_CODE = 27;
const spyOnToggleShowModal = jest.spyOn(wrapper.props(), 'toggleShowModal');
var event = new KeyboardEvent('keydown', { key: 'Escape', keyCode: KEYBOARD_ESCAPE_CODE, which: KEYBOARD_ESCAPE_CODE });
document.dispatchEvent(event);
expect(spyOnToggleShowModal).toHaveBeenCalled();
});
解决方案
我知道我参加聚会迟到了,但这可能仍然对某些人有所帮助
test("executes handler on escape keydown and unsubscribes after unmount", () => {
const callback = jest.fn();
const wrapper = mount(<Modal toggleShowModal={callback} />);
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
expect(callback).toHaveBeenCalledTimes(1);
wrapper.unmount();
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
expect(callback).toHaveBeenCalledTimes(1);
});
介意document.dispatchEvent()
。根据添加 EventListener 的位置,可能需要在window
其他元素上调度它
推荐阅读
- jenkins - 在多个阶段之间重用 Jenkins 中的代理(docker 容器)
- ssl - 旧 TLS1.0 客户端无法连接到自定义域上的 Google App Engine
- c++ - 在静态库(C++、Eclipse CDT)中使用#ifdef
- networkx - 如何更改使用 holoviews/bokeh 绘制的 networkx 图中的颜色?
- c++11 - c++ popen 使应用程序停止 30 秒
- sql - 在 T-SQL 中设置等于计数的列
- c++ - 在 decltype 中使用命名空间
- android - 重用具有多个片段的单个 ViewModel。MvvmCross Android
- rust - 关联类型超特征的别名
- ie11-developer-tools - IE 11 缺少请求标头