![](/img/trans.png)
[英]Setting up Jest and Enzyme to test React 15 cannot find module react/lib/ReactTestUtils
[英]Cannot unit test useClickAway with ReactTestUtils
我正在嘗試測試一個使用react-use
useClickAway
的組件。
這是我的組件:
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
})
我嘗試在useClickAway
回調中使用console.log
。 然而,它似乎沒有被稱為..
我錯過了什么嗎?
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'));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.