findByTestId имеет разное поведение в зависимости от порядка тестов

Question

У меня есть следующие тесты для моего компонента React:

        it("Should render detail page", () => {
    const { getByTestId } = render(<PrimaryStory id="123456" />);
    const objectPage = getByTestId("object-page-wrapper");
    expect(objectPage).toBeInTheDocument();
  });
  
  it("Should render the button", () => {
    const { getByTestId } = render(<PrimaryStory id="123456" />);
    const button = getByTestId("button-wrapper");
    expect(button).toBeInTheDocument();

Оба они проходят, но мы получаем известное предупреждение «Обновления React должны быть преобразованы в действие», потому что наш компонент использует некоторые веб-компоненты из внешней библиотеки, которые имеют некоторые обновления во время рендеринга. Следуя советам Кента С. Доддса в этом блоге , я попытался изменить свои тесты на следующие:

        it("Should render detail page", async () => {
    const { findByTestId } = render(<PrimaryStory id="123456" />);
    const objectPage = await findByTestId("object-page-wrapper");
    expect(objectPage).toBeInTheDocument();
  });

  it("Should render the button", async () => {
    const { findByTestId } = render(<PrimaryStory id="123456" />);
    const button = await findByTestId("button-wrapper");
    expect(button).toBeInTheDocument();
  });

Это удаляет предупреждение, но второй тест больше не проходит. Я не могу точно понять, почему это происходит, но даже тогда я попытался изменить порядок тестов (сначала кнопка, затем ObjectPage), а затем оба прошли! Почему порядок повлияет на тесты в этой ситуации?

Чтобы было понятно, мой компонент "PrimaryStory" - это история, созданная с помощью composeStoryиз "@storybook / testing-react". Мой компонент, отображаемый в истории, выглядит так:

      export interface DetailProps {
  id: string;
}

export const TenderingDetail: React.FC<DetailProps> = ({ id }) => {
  const { t } = useTranslation();

  return (
    <ObjectPage
      data-testid="object-page-wrapper"
      headerTitle={
        <DynamicPageTitle
          actions={
            <Button data-testid="button-wrapper">
              {t("translationKey")}
            </Button>
          }
        />
      }
    />
  );
};