0

我的 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 更新应该被包装到动作中”，因为我们的组件使用了来自外部库的一些 web 组件，这些组件在渲染期间有一些更新。按照 Kent C. Dodds 在这篇博文中的提示，我尝试将我的测试更改为以下内容：

  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>
          }
        />
      }
    />
  );
};
4

0 回答 0