MUI Select测试：fireEvent触发act()错误与user.selectOptions失效问题

组件代码 #

待测试的Select组件代码如下：

<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();

  // 可选中值但会触发控制台错误
  fireEvent.change(actionOriginSelect, {
    target: { value: strategyActions.timer.value },
  });

  // 更倾向使用这行代码，但actionOriginSelect的值不会变化
  // await user.selectOptions(actionOriginSelect, strategyActions.timer.value);

  const actionTypeSelect = screen.getByTestId("actionType");
  expect(actionTypeSelect).toBeInTheDocument();

  // 确认未显示确认模态框
  const changeOriginModal = screen.queryByText(
    "StrategyManager.Confirm_Change_Origin",
  );
  expect(changeOriginModal).toBeNull();
});

已尝试的解决方案 #

• 将测试不同部分包裹在act()中，尝试定位需包裹的代码段
• 尝试await引发错误的fireEvent
• 在fireEvent后的断言中使用waitfor
• 按照相关文章建议使用jest timers

上述方案均无法消除终端中的控制台警告。

请求帮助 #

恳请提供优化测试、实现user.selectOptions的建议；若无法实现，也请告知需将哪部分代码包裹在act()中以消除错误，帮助我更好地理解并规避此类问题。

内容的提问来源于stack exchange，提问作者Olivia Bates