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

liwlm1x9  于 5个月前  发布在  Jest
关注(0)|答案(1)|浏览(77)

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

<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),但由于某种原因,这不会更新目标输入的值,所以我只能使用第一个实现。
测试通过,但它导致控制台错误,指出更新未 Package 在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()中 Package 上述测试的不同部分,希望找到需要 Package 的部分
  • 已尝试等待我认为导致错误的起火事件已尝试
  • 尝试在fireEvent之后的Assert上实现waitfor
  • 尝试jest定时器建议的文章对上述行为警告

似乎没有一个可以从终端删除或清除控制台警告。
任何关于如何改进测试或实现user.selectOptions的帮助或建议都将非常感谢。如果失败,帮助上述哪些部分需要 Package 在act中以删除控制台错误将是有益的,因为我很高兴与测试,如果这是最好的,我可以得到,但显然多个测试导致此控制台警告不是很好,我想更好地了解这个问题以避免它在未来。

zazmityj

zazmityj1#

经过几天的尝试和错误,我终于找到了答案,我遇到了这个question,它修复了我得到的错误。我必须在fire事件周围添加await act(alloc()=> {}),并添加一个await

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

字符串

相关问题