[Tabs] Snapshot test not matching

[tbrj-capco]

Current behavior 😯

The generated id, aria-controls and aria-labelledby is always new and snapshot can not match.

Expected behavior 🤔

It should generate stable ids to be able to test the snapshot

Your environment 🌎

@mui/lab: 5.0.0-alpha.74,
@mui/material: 5.5.0,
@testing-library/jest-dom: 5.11.9,

[zakiRefai]

I have tried adding id as a prop to the component but I'm still getting dynamic ids (and aria-controls)

[andywgarcia]

I too am seeing the same issue. Even adding the "id" and "aria-controls" prop to the <Tab> component does not work. It seems the automatically generated id and aria-controls are override the provided id and aria-controls labels.

However, this is not happening on the <TabPanel> component with id and aria-labelledby props

[andywgarcia]

I haven't explored the code base much, but I am pretty sure this state value will need to be initialized with a given value (probably the id that is given directly to the <Tab>) and only set in the use effect if one isn't provided

material-ui/packages/mui-lab/src/TabContext/TabContext.js

Line 15 in 32192fb

setId(`mui-p-${Math.round(Math.random() * 1e5)}`);

[sylvain-chabannes]

I encounter the same issue, To workaround it, I mocked the Tab and TabPanel components.

jest.mock('@mui/material/Tab', () => ({ children, id, "aria-controls": ariaControls, ...props }) => {
  const TabMock = () => <div {...props}>{children}</div>;
  return <TabMock />;
});

jest.mock('@mui/lab/TabPanel', () => ({ children, id, "aria-labelledby": ariaLabelledby, ...props }) => {
  const TabPanelMock = () => <div {...props}>{children}</div>;
  return <TabPanelMock />;
});

[krichter722]

global.Math.random = jest.fn().mockImplementation(() => 1)

right before render seem to be a much less invasive workaround.

Consider saving the original Math.random and restoring it after the test case.

[oliviertassinari]

Because of how Base UI's Tabs component is implemented, I believe this issue only impacts Material UI, and until it's not migrated to Base UI.

[siriwatknp]

For a workaround, can you try this

jest.mock('@mui/lab/TabContext', () => ({
  __esModule: true,
  getPanelId: () => 'foo',
  getTabId: () => 'bar',
  …jest.requireActual('@mui/lab/TabContext'),
}));