javascript - 使用 react-testing-library 测试 react-hotkeys
问题描述
https://github.com/greena13/react-hotkeys
https://github.com/kentcdodds/react-testing-library
我无法触发热键(开玩笑)。一个演示组件:
import React from 'react';
import { HotKeys } from 'react-hotkeys';
class TestComponent extends React.Component {
constructor(props) {
super(props);
this.state = { enterClicked: false };
}
render() {
const { enterClicked } = this.state;
return (
<HotKeys
handlers={{
enter: (e) => {
console.log('ENTER', e);
this.setState({ enterClicked: true });
},
}}
>
<input placeholder="input" type="text" />
{enterClicked && <div>Enter clicked</div>}
</HotKeys>
);
}
}
export default TestComponent;
这是一个测试:
import React from 'react';
import { cleanup, fireEvent, render, waitForElement } from 'react-testing-library';
import TestComponent from './TestComponent';
afterEach(cleanup);
describe('Test', () => {
it('Hotkeys', () => {
const { debug, getByPlaceholderText, getByText } = render(<TestComponent />);
const inputNode = getByPlaceholderText('input');
fireEvent.keyDown(inputNode, { key: 'Enter', keyCode: 13, code: 13, bubbles: true });
debug();
waitForElement(() => getByText('Enter clicked'));
});
});
这是我的笑话设置文件:
/* global jest */
import { JSDOM } from 'jsdom';
import 'jest-localstorage-mock';
import dotenv from 'dotenv';
dotenv.config({ path: '../.env' });
const jsdom = new JSDOM('<!doctype html><html><body></body></html>', { url: 'https://example.com' });
const { window } = jsdom;
window.location.reload = jest.fn();
window.location.assign = jest.fn();
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter((prop) => typeof target[prop] === 'undefined')
.reduce(
(result, prop) => ({
...result,
[prop]: Object.getOwnPropertyDescriptor(src, prop),
}),
{},
);
Object.defineProperties(target, props);
}
if (!window.attachEvent) {
// eslint-disable-next-line func-names
const attachEvent = function(on, callback) {
on = on.substring(2, on.length);
return this.addEventListener(on, callback);
};
window.Element.prototype.attachEvent = attachEvent;
}
if (!window.detachEvent) {
// eslint-disable-next-line func-names
const detachEvent = function(on, callback) {
on = on.substring(2, on.length);
return this.removeEventListener(on, callback);
};
window.Element.prototype.detachEvent = detachEvent;
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
platform: 'Mac',
};
copyProps(window, global);
global.fetch = require('jest-fetch-mock');
global.requestAnimationFrame = (cb) => {
setTimeout(cb, 0);
};
global.cancelAnimationFrame = (cb) => {
setTimeout(cb, 0);
};
有任何想法吗?
解决方案
这是我如何使它工作的:
HotKeys
我在-component 本身上放置了一个测试 ID :
<HotKeys
data-testid="hot-keys-id"
...
然后我关注组件,然后手动创建一个事件:
const hotkeys = await waitForElement(() => getByTestId('hot-keys-id'));
hotkeys.focus();
const keyDownEvent = new Event('keydown');
keyDownEvent.keyCode = 13;
keyDownEvent.key = 'Enter';
keyDownEvent.code = 13;
hotkeys.dispatchEvent(keyDownEvent);
推荐阅读
- c# - 获取两个列表中的唯一元素,其中项目不匹配 100%(只是部分)
- ios - Swift 委托没有被调用
- powershell - Sqljob,如果文件不包含某些文本,则使 powershell 步骤失败
- vb.net - 进程类不读取文件路径
- java - 将 Spring websockets (sockJS + Stomp) 与基于令牌的身份验证 (JWT) 一起使用的最佳方法
- sas - 在多个“流程”之间共享程序文件
- c++ - 根据用户输入的整数显示字符
- javascript - 如何一次提交两张表格或将两张表格合二为一?
- c# - 可被零异常整除
- javascript - 使用圆形 SVG,如何为虚线进度条设置动画以显示一定百分比?