It worked for me like this:

    it("activates second tab when clicking on it", () => {
        render(<YourComponent />)

    const HELLOW1= screen.getByText("HELLOW1").closest("button");
    const HELLOW2= screen.getByText("HELLOW2").closest("button");
    expect(HELLOW1).toHaveAttribute("aria-selected", "true");
    expect(HELLOW2).toHaveAttribute("aria-selected", "false");;
    expect(HELLOW1).toHaveAttribute("aria-selected", "false");
    expect(HELLOW2).toHaveAttribute("aria-selected", "true");


Here is a test to check that the second tab becomes selected when we click on it:

it("activates second tab when clicking on it", () => {
  const { getByText } = render(<YourComponent />);
  const hellow1 = getByText("HELLOW1").closest("button");
  const hellow2 = getByText("HELLOW2").closest("button");
  expect(hellow1).toHaveAttribute("aria-selected", "true");
  expect(hellow2).toHaveAttribute("aria-selected", "false");;
  expect(hellow1).toHaveAttribute("aria-selected", "false");
  expect(hellow2).toHaveAttribute("aria-selected", "true");

You probably will not need to do this test because Material UI tabs are already tested, but you can ispire from the code to test your features.


I believe material ui tabs have attribute of role="tab". By saying that You can then try getting the tab by role. See

In your case you can try this:

const tab = screen.getByRole('tab', { name: 'HELLOW2' });;
expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('HELLOW2');

Related Query

More Query from same tag