Флажок тестирования MUI с библиотекой реагирования-тестирования

Question

В компоненте реагирования у меня есть флажок из Material UI с такой разметкой:

<label class="MuiFormControlLabel-root">
   <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-353 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-354 Mui-checked MuiIconButton-colorPrimary" aria-disabled="false">
      <span class="MuiIconButton-label">
         <input class="PrivateSwitchBase-input-356" id="citizen-profile-challenge-checkbox-diabetes" type="checkbox" data-indeterminate="false" value="other" checked="">
         <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
            <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>
      </span>
      <span class="MuiTouchRipple-root"></span>
   </span>
   <span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">Other</span>
</label>

Я пытаюсь следовать направляющим линиям, запрашивая метки (в данном случае «Другое») вместо использования идентификаторов.

Поэтому я хочу установить флажок с меткой «Другое» (<span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">Other</span>) и проверить, что значение флажка изменяется (<input class="PrivateSwitchBase-input-356" id="citizen-profile-challenge-checkbox-diabetes" type="checkbox" data-indeterminate="false" value="other" checked="">).

fireEvent.click(getByLabelText('Other', { selector: 'input' }))
const checked1 = (getByLabelText('Other', { selector: 'input' }) as HTMLInputElement).checked
console.log(checked1) // false

fireEvent.click(getByLabelText('Other', { selector: 'input' }))
const checked2 = (getByLabelText('Other', { selector: 'input' }) as HTMLInputElement).checked
console.log(checked2) // false

fireEvent.click(getByLabelText('Other'))
const checked3 = (getByLabelText('Other') as HTMLInputElement).checked
console.log(checked3) // false

fireEvent.click(getByLabelText('Other'))
const checked4 = (getByLabelText('Other') as HTMLInputElement).checked
console.log(checked4) // false

Я пробовал разные методы, но checked остается false. Похоже на instad, мне нужно взять одного и того же ярлыка и искать там. Но как мне это сделать?

Answer 1

Я нашел возможное объяснение, почему флажок не изменяется при нажатии ...

Этот флажок является контролируемым входом, управляемым родительским компонентом. Таким образом, состояние на самом деле не меняется при нажатии здесь. Вместо этого он просто вызывает функцию обратного вызова (переданную из реквизита) onChange. Таким образом, правильный способ проверить это - проверить, вызывается ли обратный вызов с правильными аргументами и полезной нагрузкой.

Надеюсь, это поможет другим, сталкивающимся с такой же проблемой.

it('should clea field if "Other" is unchecked', (): void => {
    const citizen = {
        ...props.citizen,
        illnesses: [Challenge.Other],
        otherIllnesses: 'Blah...',
    }
    const { getByLabelText } = render(<CitizenProfileChallenges {...props} citizen={citizen} />)

    // arrange
    const checkboxLabel = 'Other'

    // act
    fireEvent.click(getByLabelText(checkboxLabel))

    // assert
    expect(props.onCitizenChange).toHaveBeenCalledTimes(1)
    expect(props.onCitizenChange).toHaveBeenCalledWith({
        ...
    })
})

Answer 2

Я думаю, вам просто нужно использовать addEventListener, вот пример.

document.getElementById("citizen-profile-challenge-checkbox-diabetes")
        .addEventListener("change", function changeHandler() {
          console.log(this.checked ? "checked!!" : "unchecked!!");
        });