web-dev-qa-db-ja.com

Material-UIチェックボックスをテストする方法は、react-testing-libraryでチェックされますか？

Material UIは、チェックボックスがクリックされたときに別のSVGをレンダリングし、実際の入力要素の属性や何かを変更しないように機能するようです。では、要素がreact-testing-libraryの理念に沿ってチェックされていることを実際にテストするにはどうすればよいですか？

ここに大まかな例があります

// Checkbox component usage
export const CheckBoxContainer = () => 
<Checkbox
  inputProps={{ 'data-testid': `clickable-checkbox-1234` }}
  data-testid={`checkbox-1234`}
/>

// test
test('check the box', async () => {
  const { getByTestId } = render(<CheckBoxContainer />);
  await waitForElement(() => getByTestId(`checkbox-1234`));
  const checkbox = getByTestId(`checkbox-1234`);
  fireEvent.click(getByTestId(`clickable-checkbox-1234`));
  expect(checkbox).toHaveAttribute('checked');
});

// Generated HTML by Material UI
<span class="MuiButtonBase-root-54 MuiIconButton-root-48 MuiSwitchBase-root-231 MuiCheckbox-root-225 MuiCheckbox-colorSecondary-230 MuiSwitchBase-checked-232 MuiCheckbox-checked-226" data-testid="checkbox-1234">
  <span class="MuiIconButton-label-53">
    <svg class="MuiSvgIcon-root-57" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
      <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
    </svg>
    <input class="MuiSwitchBase-input-234" type="checkbox" data-indeterminate="false" data-testid="clickable-checkbox-1234" value="">
  </span>
  <span class="MuiTouchRipple-root-66">
  </span>
</span>
material-uireact-testing-library
7
Dale Race

チェックボックスはinputをレンダリングしているので、画像に焦点を合わせるのではなく、それを使用します。

あなたはこのようなことをすることができます：

const checkbox = getByTestId('checkbox-1234').querySelector('input[type="checkbox"]')
expect(checkbox).toHaveProperty('checked', true)
1
Gpx

理解した。 DOMでcheckedゲッターを使用する必要があり、checkedプロパティを確認しようとしないでください。説明するこの問題が見つかりました： https://github.com/facebook/react/issues/7051#issuecomment-334018747

そしてこのCodepenは、checked属性がReactで変更されない方法をデモしています： https://codepen.io/gaearon/pen/wgedvV?editors=001

このように：expect(checkbox.checked).toBe(true)

0
Dale Race