单击后检查按钮的属性

Question

只是想确保我按照惯用的方式执行此操作，而我看到的示例似乎没有显示此...当我单击按钮时，我想检查 aria 属性是否已更新.为了让测试工作，我需要重新查询该元素。这是最好的方法，还是我应该等待什么？

test("should set aria-selected on tab after click", () => {

    let secondTab = getAllByRole("tab")[1];

    fireEvent.click(secondTab);

    secondTab = getAllByRole("tab")[1]; // Is this proper?

    expect(secondTab).toHaveAttribute("aria-selected", "true");

Answer 1

您应该等待 DOM 更改。您可以为此使用 act。

import { act } from '@testing-library/react';


test("should set aria-selected on tab after click", async () => {
  const secondTab = getAllByRole("tab")[1];

  await act(async () => {
    fireEvent.click(secondTab);
  }); 

  expect(secondTab).toHaveAttribute("aria-selected", "true");
});

Answer 2

您可以等待您的元素在点击后呈现，使用 async wait utilities

test("should set aria-selected on tab after click", () => {

  let secondTab = getAllByRole("tab")[1];

  fireEvent.click(secondTab);

  // wait for appearance
  await waitFor(() => {
    expect(getAllByRole("tab")[1]).toBeInTheDocument()
  })

  expect(secondTab).toHaveAttribute("aria-selected", "true");
});

单击后检查按钮的属性

Check attribute of button after click

react-testing-library