单击后检查按钮的属性

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

您可以使用异步等待实用程序在单击后等待元素渲染

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");
});