MUI Select 导致使用 fireEvent 导致 act() 控制台错误

MUI Select causing act() console error using fireEvent

提问人:Olivia Bates 提问时间:11/17/2023 更新时间:11/17/2023 访问量:17

问:

对选定组件进行单元测试:

<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(...) 中enter image description here

完整的测试在这里:

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的任何帮助或建议将不胜感激。或者,如果做不到这一点,请帮助解决上述内容的哪一部分以消除控制台错误,这将是有益的,因为如果这是我能得到的最好的测试,我对测试感到满意,但显然导致此控制台警告的多个测试不是很好,我想更好地了解这个问题,以便将来避免它。

测试 jestjs material-ui

评论


答:

0赞 Olivia Bates 11/17/2023 #1

经过几天的反复试验,终于找到了答案,我遇到了这个问题,它解决了我遇到的错误。我不得不在火灾事件周围添加 await act(async () => {}) 并添加一个 await

await act(async () => {
fireEvent.change(await actionOriginSelect, {target: {value: strategyActions.timer.value}};