提问人:Olivia Bates 提问时间:11/17/2023 更新时间:11/17/2023 访问量:17
MUI Select 导致使用 fireEvent 导致 act() 控制台错误
MUI Select causing act() console error using fireEvent
问:
对选定组件进行单元测试:
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">
{t("StrategyManager.Select_Action_Origin")}
</InputLabel>
<Select
name="actionOrigin"
label="Select Action Origin"
id="operator-select"
value={formik.values.actionOrigin}
onChange={(event) => handleFormDataChange(event)}
fullWidth
inputProps={{
id: "actionOrigin",
"data-testid": "actionOrigin",
}}
>
<MenuItem value={strategyActions.communications.value}>
{t(strategyActions.communications.label)}
</MenuItem>
<MenuItem value={strategyActions.timer.value}>
{t(strategyActions.timer.label)}
</MenuItem>
<MenuItem value={strategyActions.socials.value}>
{t(strategyActions.socials.label)}
</MenuItem>
</Select>
</FormControl>;
我似乎只能使用我更喜欢使用 来更改单元测试中的值,但由于某种原因,这不会更新目标输入的值,所以我只剩下第一个实现。fireEvent.change(actionOriginSelect, { target: { value: strategyActions.timer.value } });
user.selectOptions(actionOriginSelect, strategyActions.timer.value)
测试正在通过,但它会导致控制台错误,指出更新未包装在 act(...) 中
完整的测试在这里:
it("selects the timer option and reveals the action selector without showing a popup", async () => {
const user = userEvent.setup();
render(
<ActionsDrawer/>,
);
const actionOriginSelect = screen.getByTestId("actionOrigin");
expect(actionOriginSelect).toBeInTheDocument();
// selects value and inputs it in the field but causes console error in process?
fireEvent.change(actionOriginSelect, {
target: { value: strategyActions.timer.value },
});
// ideally would prefer to use the below line of code but for some reason actionOriginSelect won't change value
// await user.selectOptions(actionOriginSelect, strategyActions.timer.value);
const actionTypeSelect = screen.getByTestId("actionType");
expect(actionTypeSelect).toBeInTheDocument();
// Ensure no confirmation modal is displayed
const changeOriginModal = screen.queryByText(
"StrategyManager.Confirm_Change_Origin",
);
expect(changeOriginModal).toBeNull();
});
我尝试了以下方法:
- 将上述测试的不同部分包装在 act() 中,以期找到需要包装的部分
- 已尝试等待我认为导致错误的火灾事件
- 尝试在fireEvent之后对断言实现waitfor
- 尝试了上述行为警告文章所建议的玩笑计时器
似乎没有一个从终端中删除或清除控制台警告。
关于如何改进测试或实现user.selectOptions的任何帮助或建议将不胜感激。或者,如果做不到这一点,请帮助解决上述内容的哪一部分以消除控制台错误,这将是有益的,因为如果这是我能得到的最好的测试,我对测试感到满意,但显然导致此控制台警告的多个测试不是很好,我想更好地了解这个问题,以便将来避免它。
答:
0赞
Olivia Bates
11/17/2023
#1
经过几天的反复试验,终于找到了答案,我遇到了这个问题,它解决了我遇到的错误。我不得不在火灾事件周围添加 await act(async () => {}) 并添加一个 await
await act(async () => {
fireEvent.change(await actionOriginSelect, {target: {value: strategyActions.timer.value}};
评论