reactjs - 无法使用 ReactTestUtils 对 useClickAway 进行单元测试
问题描述
我正在尝试测试使用useClickAway
from的组件react-use
。
这是我的组件:
export default function DropdownMenu(props: DropdownMenuProps) {
const { className, align, children } = props;
const dropdownRef = React.useRef(null);
const [isDropdownActive, setIsDropdownActive] = React.useState(false);
useClickAway(dropdownRef, () => setIsDropdownActive(false));
return (
<div
data-id="dropdown-parent"
ref={dropdownRef}
className={classes(
"dropdown is-pulled-right",
align === "right" && "is-right",
isDropdownActive && "is-active"
)}
>
<div className="dropdown-trigger">
<button
data-id="dropdown-button"
onClick={() => setIsDropdownActive(!isDropdownActive)}
className={classes("button is-dark is-radiusless", className)}
aria-haspopup="true"
>
<span className="icon is-small">
<i className="fas fa-ellipsis-v" aria-hidden="true" />
</span>
</button>
</div>
<div className="dropdown-menu" role="menu">
<div className={classes("dropdown-content", styles.dropdown)}>
{children}
</div>
</div>
</div>
);
}
这是我的测试:
it('gets deactivated when area outside of dropdown is clicked', () => {
const container = document.createElement('div');
document.body.appendChild(container);
ReactTestUtils.act(() => {
ReactDOM.render(
<div>
<button data-id="outside"/>
<DropdownMenu>
<div/>
</DropdownMenu>
</div>,
container);
})
const button = container.querySelector('button[data-id="dropdown-button"]') as Element
const parent = container.querySelector('div[data-id="dropdown-parent"]') as Element
const outside = container.querySelector('button[data-id="outside"]') as Element
ReactTestUtils.act(() => {
ReactTestUtils.Simulate.click(button);
})
expect(parent.className).toContain('is-active') //<--- this works
ReactTestUtils.act(() => {
ReactTestUtils.Simulate.click(outside);
})
expect(parent.className).not.toContain('is-active') //<--- this doesn't
})
我尝试console.log
在useClickAway
回调中使用。但是,它似乎没有被调用..
我错过了什么吗?
解决方案
useClickAway 使用mousedown
事件:https ://github.com/streamich/react-use/blob/v13.27.0/src/useClickAway.ts#L4
使用反应测试库:
import { render, fireEvent } from '@testing-library/react';
test('click away', () => {
const { getByText } = render(<MyComponent />);
// Does not work
//getByText('outside').click();
// Does work
fireEvent.mouseDown(getByText('outside'));
});
推荐阅读
- authentication - 为 JAX-RS Web 服务提供安全性
- javafx - Javafx:仅为 fxml 接口的一部分编写代码
- powershell - 从有效列表中禁用用户
- javascript - 如何使用 ajax 将 JSON 加载到网页
- asp.net-mvc - 如何根据 mvc 中的按钮单击将 linq 结果显示到局部视图并刷新局部视图?
- c# - 如何使用 linq 按周和工作日对日期进行分组?
- javascript - State Hash Root 问题(即)Validator 不加块
- syntax - DLang 中的自动功能模板
- laravel - laravel 模型关系结果
- python - 尝试使用 .get_layer 方法在 Keras 中创建模型时图形断开连接