React测试库自定义呈现函数和异步等待

Question

我的组件有以下自定义呈现函数。

它有Create和Edit两种模式。

Create是同步的，Edit是异步的。

其职能如下：

    const renderComponent = async (
      scheduleId = "",
      dialogMode = DialogMode.CREATE,
      cohorts = MOCK_COHORT_LIST,
      jobs = JOB_LIST,
      availableForSchedule = domain === Domain.COHORT ? jobs : cohorts,
    ) => {
      render(
        <AddEditScheduleDialog
          cohorts={cohorts}
          jobs={jobs}
          availableForSchedule={availableForSchedule}
          scheduleToEdit={scheduleId}
          handleToggleDialog={mockToggleDialog}
          isDialogVisible={true}
          domain={domain}
        />,
        {
          wrapper: queryWrapper,
        },
      );

      if (dialogMode === DialogMode.EDIT) {
        expect(screen.getByRole("progressbar")).toBeInTheDocument();
      }

      await waitFor(() =>
        expect(screen.queryByRole("progressbar")).not.toBeInTheDocument(),
      );

      return {
        header: screen.getByRole("heading", {
          level: 1,
          name: `schedules:addEditDialog.${domain}.${dialogMode}.title`,
        }),
        name: {
          field: screen.getByTestId(`${domain}-name-field`),
          button: within(screen.getByTestId(`${domain}-name-field`)).getByRole(
            "button",
          ),
        },
        frequency: {
          field: screen.getByTestId("schedule-frequency-field"),
          input: within(
            screen.getByTestId("schedule-frequency-field"),
          ).getByRole("textbox"),
          helperText: `schedules:addEditDialog.form.frequency.helperText`,
        },
      };
    };

有时，在屏幕上查找元素时，我会遇到间歇性问题。这是因为函数在等待progressbar之前返回吗？

在返回所需的屏幕元素之前，是否有一种方法可以等待呈现所有内容？

Answer 1

如果编辑模式导致进度条异步显示，则应使用findByRole等。

if (dialogMode === DialogMode.EDIT) {
 expect(await screen.findByRole("progressbar")).toBeInTheDocument());
}

这是因为find*查询使用waitFor“在引擎盖下”。