Test with jest

[rlebosse]

Hi,

I'd like to test a React component that uses ariaTablist with jest and @testing-library/react.

However if I simulate a click on a role="tab" element :

• the tab has aria-selected="true"

But the matching role="tabpanel" element has no tabindex, aria-hidden, hidden attributes updated.
Moreover, the onOpen that I specified in the option is not called.

If I do all the above in a React webapp using this React component, everything works : the attributes are updated for the role="tabpanel" element and onOpen is called.

[mynamesleon]

Hi @rlebosse,

Firstly, sorry for my delayed reply to this! I've had a hectic year so far and completely missed this.

I've always tested this extensively manually, but I really ought to write some unit tests within the repo for this myself to be honest - it shouldn't be the responsibility of consuming applications to write tests for this.

Can you perhaps give me an example of your test code that's failing? My best guess without seeing your code, is that this is caused by my handling of the delay option. Even when set to 0, the tab is still activated within a setTimeout.

So you could try using and advancing fake timers in your tests to see if that's the cause. Something like:

jest.useFakeTimers();
test('displays the matching tab panel', () => {
  const { container } = render(<YourComponent />);
  const tab = getWhichEverTabYouAreChecking(container);

  act(() => {
    fireEvent.click(tab);
  });

  // run timers to get past the `delay` value
  // could also use `jest.advanceTimersByTime(yourDelayValue)` to be more precise
  jest.runAllTimers();

  // now do your assertions
  const tabPanel = getWhichEverTabPanelYouAreChecking(container);
  expect(tab).toHaveAttribute('aria-selected', 'true');
  expect(tabPanel).toHaveAttribute('tabindex', '0');
});

Alternatively, you could try making your tests async and using waitFor to account for the delay after the interaction. Something like:

test('displays the matching tab panel', async () => {
  const { container } = render(<YourComponent />);
  const tab = getWhichEverTabYouAreChecking(container);

  act(() => {
    fireEvent.click(tab);
  });
  await waitFor(() => {
    const tabPanel = getWhichEverTabPanelYouAreChecking(container);
    expect(tab).toHaveAttribute('aria-selected', 'true');
    expect(tabPanel).toHaveAttribute('tabindex', '0');
  });
});

Using fake timers would be better of course, as it wouldn't unnecessarily increase your test execution time.

[mynamesleon]

There are a couple of enhancements for me to bear in mind from this as well, namely:

1. for me to add unit tests to the repo
2. for a delay value of 0, to potentially bypass using the setTimeout at all