Check attribute of button after click

user_980799 0
Viewed 1141

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");
react-testing-library
2 Answers

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

You should be awaiting for DOM changes. And you can use act for that.

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