使用 react-testing-library 测试 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>

我正在尝试通过查询标签（在本例中为“其他”）而不是使用 id 来遵循指南。

所以我想单击带有“其他”标签的复选框 (<span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">Other</span>) 并测试 Checkbox 的值是否发生变化 (<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。似乎我需要抓住标签跨度的兄弟并在那里搜索。但是我该怎么做呢？

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!!");
        });