Tab click event not working under test

[mattrothenberg]

Issue summary

Under test (say, with @testing-library/react), triggering click events on individual tabs within the Tabs component seems to have no effect. In the browser, tab clicks work totally fine and the content changes according to what tab you've clicked.

Expected behavior

When manually triggering fireEvent.click on a given tab, I would expect the rendered tab content to change according to what tab was clicked.

Actual behavior

Nothing happens. I don't think this is a race-condition, either. It kind of seems like the click event has no effect under test.

Steps to reproduce the problem

Given the boilerplate tab markup –

function TabsExample() {
  const [selected, setSelected] = React.useState(0);

  const handleTabChange = React.useCallback(
    (selectedTabIndex) => setSelected(selectedTabIndex),
    []
  );

  const tabs = [
    {
      id: "all-customers-1",
      content: "All",
      accessibilityLabel: "All customers",
      panelID: "all-customers-content-1",
    },
    {
      id: "accepts-marketing-1",
      content: "Accepts marketing",
      panelID: "accepts-marketing-content-1",
    },
    {
      id: "repeat-customers-1",
      content: "Repeat customers",
      panelID: "repeat-customers-content-1",
    },
    {
      id: "prospects-1",
      content: "Prospects",
      panelID: "prospects-content-1",
    },
  ];

  return (
    <Card>
      <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange}>
        <Card.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
        </Card.Section>
      </Tabs>
    </Card>
  );
}

I would expect the following test to work.

import { fireEvent, render, screen } from "@testing-library/react";
import App from "./App";

test("changes the tab when clicked", async () => {
  render(<App />);

  expect(screen.getByText("Tab 0 selected")).toBeInTheDocument(); // ✅

  const acceptsTab = screen.getAllByText(/accepts marketing/i)[0];
  expect(acceptsTab).toBeInTheDocument(); // ✅

  fireEvent.click(acceptsTab);

  expect(screen.getByText("Tab 1 selected")).toBeInTheDocument(); // 🚨
});

Reduced test case

https://github.com/mattrothenberg/shopify-polaris-tab-not-working

Specifications

• Are you using the React components? (Y/N): Yes
• Polaris version number: latest
• Browser: Headless (Jest)
• Device: Macbook Air
• Operating System: Catalina 10.15.7

[cloud-walker]

I can confirm this issue, with latest versions of everything but from ubuntu instead of catalina, any news on this?

[github-actions[bot]]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's design system and dev experience.