如何使用react测试库在资料ui MenuList组件上测试下键事件
我有下面的MenuList组件，我想在该组件上测试key down事件。
组件
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import * as React from 'react';
export default function App() {
return (
<div>
<MenuList autoFocusItem={true}>
<MenuItem>option 1</MenuItem>
<MenuItem>option 2</MenuItem>
<MenuItem>option 3</MenuItem>
</MenuList>
</div>
);
}测试
import {
fireEvent,
render,
} from 'test-utils';
import React from 'react';
import TestMenuList from './TestMenuList';
test('that on key down press, the focus on menu list item moves down', async () => {
// Render component
const { getAllByRole, getByRole } = render(<TestMenuList />, {});
let MenuItem1 = getAllByRole('menuitem')[0];
expect(MenuItem1.classList.contains('Mui-focusVisible')).toBe(true); // assert 1
const Menu = getByRole('menu');
fireEvent.keyDown(Menu, { Key: 'ArrowDown', code: 40 });
MenuItem1 = getAllByRole('menuitem')[0];
const MenuItem2 = getAllByRole('menuitem')[1];
expect(MenuItem1.classList.contains('Mui-focusVisible')).toBe(false); // assert 2
expect(MenuItem2.classList.contains('Mui-focusVisible')).toBe(true); // assert 3
});为了确保菜单项有焦点，我正在检查菜单项是否有Mui-focusVisible类。因为我在autoFocusItem={true}中设置了MenuList，所以第一个菜单项应该自动添加Mui-focusVisible类。这是断言语句1，它正在传递。
let MenuItem1 = getAllByRole('menuitem')[0];
expect(MenuItem1.classList.contains('Mui-focusVisible')).toBe(true); // assert 1然后，我在菜单上启动了一个按键事件。
const Menu = getByRole('menu');
fireEvent.keyDown(Menu, { Key: 'ArrowDown', code: 40 });并检查Mui-focusVisible类是否已从第一个菜单项中删除并添加到第二个菜单项中。现在，断言语句2和3的测试失败了。
MenuItem1 = getAllByRole('menuitem')[0];
const MenuItem2 = getAllByRole('menuitem')[1];
expect(MenuItem1.classList.contains('Mui-focusVisible')).toBe(false); // assert 2
expect(MenuItem2.classList.contains('Mui-focusVisible')).toBe(true); // assert 3我将classList记录为MenuItem1和MenuItem2，以查看Mui-focusVisible是否从第一个菜单项中删除，并在键下事件之后添加到第二个菜单项中。但是Mui-focusVisible类仍然在第一个菜单项中，而不是在第二个菜单项中。
我试着添加await wait()。
fireEvent.keyDown(Menu, { Key: 'ArrowDown', code: 40 });
await wait();用act(() => {})包装火炉，
act(() => fireEvent.keyDown(Menu, { Key: 'ArrowDown', code: 40 }));
await wait()在第一个菜单列表项目上触发键下事件，而不是菜单本身。
act(() => fireEvent.keyDown(MenuItem1, { Key: 'ArrowDown', code: 40 }));
await wait()他们都不起作用。我为这个组件创建了一个码箱，在这里，它似乎在UI中很好地工作。但测试失败了。
Stack Overflow用户
发布于 2020-02-27 15:30:56
我建议查看MenuList：https://github.com/mui-org/material-ui/blob/v4.9.4/packages/material-ui/test/integration/MenuList.test.js的集成测试。
键盘导航经过了非常彻底的测试。但是，您会发现，它主要检查具有焦点的元素，而不是检查Mui-focusVisible。焦点可见逻辑(https://github.com/mui-org/material-ui/blob/v4.9.4/packages/material-ui/src/utils/focusVisible.js)依赖于在文档级别跟踪鼠标和键盘事件，并且在测试框架中很难可靠地触发这一点(尽管您可以在这里查看焦点可见逻辑的测试：https://github.com/mui-org/material-ui/blob/v4.9.4/packages/material-ui/src/utils/focusVisible.test.js)。我建议让您的测试偏离重点，并依赖Material来管理和测试应用Mui-focusVisible类。
https://stackoverflow.com/questions/60428720
复制相似问题
腾讯云开发者
