我有一个生成警告An update to DropDownMultiPick inside a test was not wrapped in act(...)
的测试
警告指向以下代码:
10 | const toggleDropdown = () => {
> 11 | setIsOpen(!isOpen);
| ^
12 | };
我的组件
const DropDownMultiPick = ({ title, options, selectedOptions, handleOptionsChange }) => {
const [isOpen, setIsOpen] = useState(false);
const [tempSelectedOptions, setTempSelectedOptions] = useState([...selectedOptions]);
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
...
我的测试
const title = "Test Options";
const options = ["Option 1", "Option 2", "Option 3"];
const selectedOptions = ["Option 1"];
const handleOptionsChange = jest.fn();
it("should open and close the dropdown menu on toggle button click", async () => {
render(
<DropDownMultiPick
title={title}
options={options}
selectedOptions={selectedOptions}
handleOptionsChange={handleOptionsChange}
/>
);
const user = userEvent.setup();
const toggleButton = screen.getByRole("button", { name: "Option 1" });
await user.click(toggleButton);
// expect(await screen.findByRole("button", { name: /done/i })).toBeInTheDocument();
await waitFor(() => {
expect(screen.getByRole("button", { name: /done/i })).toBeInTheDocument();
});
});
我所try 的
我在我的组件里加了一个act
.警告消失了,但我不认为在这个地方加act
是最好的解决方案!
const DropDownMultiPick = ({ title, options, selectedOptions, handleOptionsChange }) => {
const [isOpen, setIsOpen] = useState(false);
const [tempSelectedOptions, setTempSelectedOptions] = useState([...selectedOptions]);
const toggleDropdown = async () => {
await act(async () => {
setIsOpen(!isOpen);
});
};
问题
消除此警告的最佳解决方案是什么?我看了这个网站,但没有用:https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
EDIT
整个组件:
// src/components/batchrec/dropdown-menu-multipick.jsx
import React, { useState } from "react";
import "./dropdown-menu-multipick.styles.scss";
const DropDownMultiPick = ({ title, options, selectedOptions, handleOptionsChange }) => {
const [isOpen, setIsOpen] = useState(false);
const [tempSelectedOptions, setTempSelectedOptions] = useState([...selectedOptions]);
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
const handleItemClick = (option) => {
if (tempSelectedOptions.includes(option)) {
setTempSelectedOptions(tempSelectedOptions.filter((item) => item !== option));
} else {
setTempSelectedOptions([...tempSelectedOptions, option]);
}
};
const handleClose = () => {
setIsOpen(false);
};
const handleDone = () => {
handleOptionsChange(tempSelectedOptions);
handleClose();
};
return (
<div className="dropdown-multipick__container">
<span className="label-title-style-5">
<span className="dropdown-multipick__text label-title-style-1">{title}: </span>
<button className="dropdown-multipick__toggle" onClick={toggleDropdown}>
{selectedOptions.join(", ") || "Select..."}
</button>
</span>
{isOpen && (
<div className="dropdown-multipick__menu">
{options.map((option, index) => (
<div
key={index}
className={`dropdown-multipick__item ${
tempSelectedOptions.includes(option) ? "dropdown-multipick__item--selected" : ""
}`}
onClick={() => handleItemClick(option)}
>
{option}
</div>
))}
<button className="dropdown-multipick__done" onClick={handleDone}>
Done
</button>
</div>
)}
</div>
);
};
export default DropDownMultiPick;