按下选项卡按钮时如何测试哪个输入具有焦点
我正在构建一个 React 自动完成组件并使用 Jest 和 React-testing-library 对其进行测试。
我有两个输入。当 input1（具有自动完成功能）处于焦点时，Tab如果 input1 不为空，则单击该按钮应该使用文本自动填充 input1，或者如果 input1 为空，则将焦点移至 input2（这是表单的默认行为）。
表单.jsx
const onKeyDown = (e) => {
if(e.key === 'Tab' && e.target.value !== '') {
setInput1Text('some-autocomplete-text');
e.preventDefault(); //prevent focus from moving to the next input(input2)
}
};
表单.test.jsx
test('pressing Tab button should move focus to input2 as input1 is empty', () => {
const input1 = container.getElementsByTagName('input')[0];
const input2 = container.getElementsByTagName('input')[1];
fireEvent.change(input1, { target: { value: '' } });
fireEvent.keyDown(input1, { key: 'Tab' });
expect(input2).toBe(document.activeElement) //failing, activeElement returns <Body>
// OR
expect(input2).toHaveFocus(); //failing as well.
});
目前，在我的测试中，document.activeElement不断返回Body元素，但我希望它返回两个输入中的任何一个。也expect(input2).toHaveFocus()失败了。
如何测试焦点是否已从 input1 移至 input2？
Qyouu2回答
-
12345678_0001
我最终使用了@testing-library/user-event 库。我fireEvent用替换userEvent为 用于Tab媒体。我的代码现在看起来像这样： import userEvent from '@testing-library/user-event'; test('pressing Tab button should move focus to input2 as input1 is empty', () => { const input1 = container.getElementsByTagName('input')[0]; const input2 = container.getElementsByTagName('input')[1]; input1.focus(); fireEvent.change(input1, { target: { value: '' } }); userEvent.tab(); //this line made it work expect(input2).toHaveFocus(); //passing now }); -
MM们
如果您执行以下操作，函数 fireEvent.keyDown 应该适合您：组件和测试都必须使用 KeyDown，（使用 KeyPressed 是我的问题之一）然后可以像这样调用 fireEvent： fireEvent.keyDown(Element, {key: 'Tab', code: 'Tab', charCode: 9})
随时随地看视频慕课网APP
相关分类
JavaScript