How to write test cases for tabs in Material UI using react testing library?

Question

I am using Material UI tabs in my application and using react testing library. I need to write test cases which for navigating from one tab to another one. Can anybody help me with this, since the code below is not properly working. Thanks in advance.

Code:

const [value, setValue] = React.useState(0)

function handleChange(event, newValue) {
  setValue(newValue)
}

<AntTabs value={value} onChange={handleChange} aria-label="Unit information">
  <AntTab label="HELLOW1" {...unitTabProps(0)} />
  <AntTab label="HELLOW2" {...unitTabProps(1)} />
  <AntTab label="HELLOW3" {...unitTabProps(2)} />
  <AntTab label="HELLOW4" {...unitTabProps(3)} />
  <AntTab label="HELLOW5" {...unitTabProps(4)} />
</AntTabs>

score 13 · Answer 1 · answered Aug 17 '21 at 08:36

13

I believe material ui tabs have attribute of role="tab". By saying that You can then try getting the tab by role. See https://testing-library.com/docs/queries/byrole

In your case you can try this:

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

answered Aug 17 '21 at 08:36

Dan Joseph Palisoc

131
1
2

I like this. This is testing the **behaviour**. Other solutions seem to be testing the **implementation**. You can also do something like this to check for accessible name: `expect(screen.getByRole('tab', { selected: true })).toHaveAccessibleName('Tab 2');` – vighnesh153 May 05 '22 at 13:28

score 3 · Answer 2 · answered Mar 03 '21 at 22:03

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");
  fireEvent.click(hellow2);
  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.

score 1 · Answer 3 · edited Mar 14 '23 at 20:51

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

    fireEvent.click(FAQs);
    expect(HELLOW1).toHaveAttribute("aria-selected", "false");
    expect(HELLOW2).toHaveAttribute("aria-selected", "true");
})

How to write test cases for tabs in Material UI using react testing library?

3 Answers3