MUI Selectテスト：基本から実践パターンまで網羅【React Testing Library】

import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import {render, screen} from '@testing-library/react';

const BasicSelect = () => {
  const [value, setValue] = useState('');
  return (
    <FormControl fullWidth>
      <InputLabel id="category-label">カテゴリー</InputLabel>
      <Select
        labelId="category-label"
        label="カテゴリー"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <MenuItem value="electronics">電子機器</MenuItem>
        <MenuItem value="books">書籍</MenuItem>
        <MenuItem value="clothing">衣類</MenuItem>
      </Select>
    </FormControl>
  );
};

test('Selectがレンダリングされる', () => {
  render(<BasicSelect />);
  
  // getByLabelTextで取得
  const select = screen.getByLabelText('カテゴリー');
  expect(select).toBeInTheDocument();
  
  // getByRoleでも取得できる
  const combobox = screen.getByRole('combobox', {name: 'カテゴリー'});
  expect(combobox).toBeInTheDocument();
});

import {waitFor} from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('Selectをクリックするとドロップダウンが開く', async () => {
  const user = userEvent.setup();
  render(<BasicSelect />);

  const select = screen.getByLabelText('カテゴリー');
  await user.click(select);

  await waitFor(() => {
    expect(screen.getByRole('listbox')).toBeInTheDocument();
  });
});

test('ドロップダウンにすべてのオプションが表示される', async () => {
  const user = userEvent.setup();
  render(<BasicSelect />);

  await user.click(screen.getByLabelText('カテゴリー'));

  await waitFor(() => {
    expect(screen.getByRole('option', {name: '電子機器'})).toBeInTheDocument();
    expect(screen.getByRole('option', {name: '書籍'})).toBeInTheDocument();
    expect(screen.getByRole('option', {name: '衣類'})).toBeInTheDocument();
  });
});

test('オプションをクリックして選択できる', async () => {
  const user = userEvent.setup();
  render(<BasicSelect />);

  const select = screen.getByLabelText('カテゴリー');

  // ドロップダウンを開く
  await user.click(select);

  // オプションを選択
  await user.click(screen.getByRole('option', {name: '書籍'}));

  // 選択値が反映される
  expect(screen.getByRole('combobox', {name: 'カテゴリー'})).toHaveTextContent('書籍');
});

test('異なるオプションを選択すると値が更新される', async () => {
  const user = userEvent.setup();
  render(<BasicSelect />);

  const select = screen.getByLabelText('カテゴリー');

  // 1回目の選択
  await user.click(select);
  await user.click(screen.getByRole('option', {name: '書籍'}));
  expect(screen.getByRole('combobox', {name: 'カテゴリー'})).toHaveTextContent('書籍');

  // 2回目の選択（別のオプション）
  await user.click(select);
  await user.click(screen.getByRole('option', {name: '電子機器'}));
  expect(screen.getByRole('combobox', {name: 'カテゴリー'})).toHaveTextContent('電子機器');
});

test('初期値が空の場合、zero-width spaceが表示される', () => {
  render(<BasicSelect />);
  
  const combobox = screen.getByRole('combobox', {name: 'カテゴリー'});
  
  // 空の選択状態ではzero-width spaceのみ
  expect(combobox.textContent).toBe('\u200B');
  
  // toHaveTextContent('')は失敗する点に注意
});

const SelectWithDefault = () => {
  const [value, setValue] = useState('books'); // 初期値あり
  return (
    <FormControl fullWidth>
      <InputLabel id="category-label">カテゴリー</InputLabel>
      <Select
        labelId="category-label"
        label="カテゴリー"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <MenuItem value="electronics">電子機器</MenuItem>
        <MenuItem value="books">書籍</MenuItem>
        <MenuItem value="clothing">衣類</MenuItem>
      </Select>
    </FormControl>
  );
};

test('初期値が設定されている場合、Selectに反映される', () => {
  render(<SelectWithDefault />);
  
  const combobox = screen.getByRole('combobox', {name: 'カテゴリー'});
  expect(combobox).toHaveTextContent('書籍');
});

test('選択されたオプションにaria-selectedが設定される', async () => {
  const user = userEvent.setup();
  render(<SelectWithDefault />); // 初期値: books

  await user.click(screen.getByLabelText('カテゴリー'));

  await waitFor(() => {
    const selectedOption = screen.getByRole('option', {name: '書籍'});
    expect(selectedOption).toHaveAttribute('aria-selected', 'true');
    
    const unselectedOption = screen.getByRole('option', {name: '電子機器'});
    expect(unselectedOption).toHaveAttribute('aria-selected', 'false');
  });
});

const DisabledSelect = ({disabled}: {disabled: boolean}) => {
  const [value, setValue] = useState('');
  return (
    <FormControl fullWidth disabled={disabled}>
      <InputLabel id="category-label">カテゴリー</InputLabel>
      <Select
        labelId="category-label"
        label="カテゴリー"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <MenuItem value="books">書籍</MenuItem>
      </Select>
    </FormControl>
  );
};

test('disabled=true でSelectが無効化される', () => {
  render(<DisabledSelect disabled={true} />);
  
  const combobox = screen.getByRole('combobox', {name: 'カテゴリー'});
  expect(combobox).toHaveAttribute('aria-disabled', 'true');
});

test('disabled=false でSelectが有効化される', () => {
  render(<DisabledSelect disabled={false} />);
  
  const combobox = screen.getByRole('combobox', {name: 'カテゴリー'});
  expect(combobox).not.toHaveAttribute('aria-disabled', 'true');
});

const MultipleSelectForm = () => {
  const [category, setCategory] = useState('');
  const [priority, setPriority] = useState('');

  return (
    <form>
      <FormControl fullWidth>
        <InputLabel id="category-label">カテゴリー</InputLabel>
        <Select
          labelId="category-label"
          label="カテゴリー"
          value={category}
          onChange={(e) => setCategory(e.target.value)}
        >
          <MenuItem value="electronics">電子機器</MenuItem>
          <MenuItem value="books">書籍</MenuItem>
        </Select>
      </FormControl>
      
      <FormControl fullWidth>
        <InputLabel id="priority-label">優先度</InputLabel>
        <Select
          labelId="priority-label"
          label="優先度"
          value={priority}
          onChange={(e) => setPriority(e.target.value)}
        >
          <MenuItem value="high">高</MenuItem>
          <MenuItem value="medium">中</MenuItem>
          <MenuItem value="low">低</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
};

test('複数のSelectを独立して操作できる', async () => {
  const user = userEvent.setup();
  render(<MultipleSelectForm />);

  const categorySelect = screen.getByLabelText('カテゴリー');
  const prioritySelect = screen.getByLabelText('優先度');

  // カテゴリーを選択
  await user.click(categorySelect);
  await user.click(screen.getByRole('option', {name: '書籍'}));
  expect(screen.getByRole('combobox', {name: 'カテゴリー'})).toHaveTextContent('書籍');

  // 優先度を選択
  await user.click(prioritySelect);
  await user.click(screen.getByRole('option', {name: '高'}));
  expect(screen.getByRole('combobox', {name: '優先度'})).toHaveTextContent('高');

  // 両方の値が正しく保持されている
  expect(screen.getByRole('combobox', {name: 'カテゴリー'})).toHaveTextContent('書籍');
  expect(screen.getByRole('combobox', {name: '優先度'})).toHaveTextContent('高');
});