Material UIのReact Tabs Componentのchildren matchエラー

事象

https://mui.com/material-ui/react-tabs/
TabsのchildrenのTabのvalue以外のものをTabsのvalueに設定すると起こるエラーで、今回はTabのvalueに存在しない"" や undefined などを設定したら発生した

文章だとわかりにくいと思うのでサンプルコードを書いてみる。

<Tabs
  value={tab}
  scrollButtons="auto"
>
  {defaultTabs.map((name) => (
    <Tab
      key={name}
      component="a"
      href={`/list?tab=${name}`}
      label={name}
      value={name}
      onClick={() => setTab(name)}
    />
  ))}
</Tabs>

このうち、 tab に defaultTabs 以外の値が入ってきたらエラーが発生する。

エラー内容

MUI: The `value` provided to the Tabs component is invalid. None of the Tabs' children match with "".

やってみたこと

1. default value を想定するタブの値にする
2. display: none のダミータブを用意し、デフォルト値をそれにする

<Tab label="dummy" value="dummy" sx={{ display: 'none' }} />

2のダミーのTabを用意しても同様のエラーが出るので対策としては微妙で、1にするか https://stackoverflow.com/questions/72085892/mui-the-value-provided-to-the-tabs-component-is-invalid-the-tab-with-this-v で話にあがっている setTimeout を施すというのが回避策らしい。

https://github.com/mui/material-ui/issues/32749 を見ると、ある程度回避策のディスカッションもあるので参考にはなりそう。

調査中

vitestで動かすとエラーが出てない。zustandのmock化の中身のせいかもしれないので、ここは調査した方が良さそうだが、現状はテスト時は問題なさそう。

import { render, screen } from '@testing-library/react';
import { MenuTabs } from './MenuTabs';

describe('MenuTabs', () => {
  it('should render tabs', async () => {
    renderMenuTabs();

    ['alice', 'bob', 'carol', 'dave'].forEach((tabName) => {
      const { ariaSelected } = screen.getByText(tabName);
      expect(ariaSelected).toBe('false');
    });
  });

  const renderMenuTabs = () => {
    render(<MenuTabs />);
  };
});