小编ken*_*z90的帖子

如何测试使用 React 测试库选中的复选框?

有人看到这里的问题吗?如果我在更改时将检查状态设置为有效。但我不想复制检查的状态数据并观察它的每一个道具的变化。

父组件获取最新的检查信息并将其置于自己的状态中,如果父组件 isChecked 更改,则 FormCheckBox isChecked 更改。我认为,它是异步工​​作的,当我到达测试代码的最新行时,父更新没有完成,所以我看到过时的 isChecked。

    export default function FormCheckBox(props: IFormCheckBoxProps) {
      const { onChange, label, isChecked, error, errorModelLabel = '' } = props
    
      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        onChange(event.currentTarget.checked)
      }
    
      const errorMsg = getFormErrorMsg(error, errorModelLabel)
    
      return (
        <FormGroup
          as={Row}
          className={cx('mb-3', { 'is-invalid': errorMsg })}
          controlId="catalogDescription"
          data-testid="slvy-formcheckbox"
        >
          <FormLabel column className="d-flex align-items-center justify-content-end fw-bold" sm={2}>
            {label}
          </FormLabel>
          <Col className="d-flex align-items-center" sm={10}>
            <input
              checked={isChecked}
              className={cx('checkbox', { 'is-invalid': errorMsg })}
              type="checkbox"
              onChange={handleChange}
            />
            <Form.Control.Feedback type="invalid">{errorMsg}</Form.Control.Feedback>
          </Col>
        </FormGroup>
      ) …
Run Code Online (Sandbox Code Playgroud)

unit-testing typescript reactjs react-testing-library

5
推荐指数
1
解决办法
1万
查看次数