fireEvent.change 不切换复选框答案

【问题标题】：fireEvent.change does not toggle checkboxfireEvent.change 不切换复选框
【发布时间】：2020-07-21 02:28:55
【问题描述】：

这是我拥有的组件

 <div
  id={id}
  data-testid="checkboxWrapper"
  className={`${checkboxWrapper} ${customClass ? customClass : ''}`}
  style={style}
>
  <input
    data-testid="checkbox"
    type="checkbox"
    onChange={handleChange}
    checked={checked}
    id={`checkbox${id}`}
    name={name}
  />
  {label && <label htmlFor={`checkbox${id}`}>{label}</label>}
</div>

更改处理程序：

    const handleChange = () => {
      setChecked((prevValue) => !prevValue)
  }
useEffect(() => {
    onChange(value, checked)
  }, [checked, value, onChange])

测试：

it('passed value and check state to onChange props', () => {
  const onChange = (value, checked) => {}
  const { getByTestId } = render(
    <Checkbox defaultChecked onChange={onChange} />
  )
  const checkbox = getByTestId('checkbox')
  const isChecked = checkbox.checked
  fireEvent.change(checkbox)
  expect(checkbox.checked).toEqual(!isChecked) // is not correct value
})

我在isChecked 中有检查状态并调用fireEvent.change，但expect(checkbox.checked).toEqual(!isChecked) 测试失败。

我做错了什么？

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

通过点击事件尝试以下操作：

it('passed value and check state to onChange props', () => {
  const onChange = (value, checked) => {}
  const { getByTestId } = render(
    <Checkbox defaultChecked onChange={onChange} />
  )
  const checkbox = getByTestId('checkbox')
  const isChecked = checkbox.checked
  fireEvent.click(checkbox, {
                   target: {checked: false}
                 })
  expect(checkbox.checked).toEqual(!isChecked)
})

我注意到您正在使用jest，但没有充分利用它！你可以修改你的代码如下：

import {fireEvent, screen} from '@testing-library/react'

it('passed value and check state to onChange props', () => {
  const onChange = (value, checked) => {}
  render(
    <Checkbox defaultChecked onChange={onChange} />
  )
  const checkbox = screen.getByRole('combobox')
  fireEvent.click(checkbox, {
                   target: {checked: false}
                 })
  expect(checkbox).not.toBeChecked()
})

Kent C. Dodds 写了一篇很棒的 article，其中讨论了一些很棒的测试技术！

【讨论】：

【解决方案2】：

您应该触发click 事件，而不是change。

参考：

【讨论】：