Check attribute of button after click

Question

Just want to make sure I am doing this idiomatically and the samples I've seen don't appear to show this... When I click a button, I want to check to see an aria attribute has been updated. To get the test to work, I need to re-query for that element. Is that the best way, or should I be awaiting on something?

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

You can wait for your element to be rendered after click, using 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");
});