Как проверить Material-UI Флажок проверен с реакцией-тестированием-библиотекой? - PullRequest
Новая
       13

Как проверить Material-UI Флажок проверен с реакцией-тестированием-библиотекой?

0 голосов
/ 13 ноября 2018

Похоже, как работает 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>

Ответы [ 3 ]

0 голосов
/ 13 ноября 2018

Разобрался. Необходимо использовать геттер checked в DOM и не пытаться проверять свойство checked. Нашел эту проблему, объясняя это: https://github.com/facebook/react/issues/7051#issuecomment-334018747

и этот Codepen демонстрирует, как проверяемый атрибут не изменяется в React: https://codepen.io/gaearon/pen/wgedvV?editors=0010

Как это: expect(checkbox.checked).toBe(true)

0 голосов
/ 22 июня 2019

В функции OnChange у вас есть доступ к объекту события и проверенному значению *1003*. 

OnChange(event:object, checked:boolean)

Это записано в документации.

Альтернативный способ - получить доступ к атрибуту checked из события следующим образом: 

event.target.checked

, это также указано в документации.

Документы: https://material -ui.com / api / checkbox /

0 голосов
/ 13 ноября 2018

Поскольку флажок отображает input, я бы работал с ним, а не фокусировался на изображении.

Вы можете сделать что-то вроде этого: 

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