Проверьте атрибут кнопки после нажатия

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

Вы можете дождаться отображения вашего элемента после клика, используя asyn c Утилиты ожидания

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

Answer 2

Вы должны ждать изменений 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");
});