1

这是我要实现的目标的演示：链接

问题是，我看到如果没有 defaultChecked 属性，我可以更改值并选中复选框，但它是遗留代码，我不能轻易将其取出，我需要该属性。

我需要： e.currentTarget.checked 在测试环境中实现，它是错误的。当我删除 defaultChecked false 时，它​​确实实现了，但我需要它。

我将react-testing-library 与 jest 一起使用。

以及来自这里的演示代码：

export class OptionCheckbox extends React.Component {
  changeHandler = e => {
    console.log("onchange triggered", e.currentTarget.checked);
  };

  render() {
    return (
      <div>
        <input
          onChange={this.changeHandler}
          defaultChecked={false}
          id="test"
          name="test"
          type="checkbox"
        />
        <label htmlFor="test">
          <span />
          Test
        </label>
      </div>
    );
  }
}

// TEST

test("Example test of change event", () => {
  const component = renderIntoDocument(<OptionCheckbox />);

  component.getByLabelText("Test").setAttribute("checked", "");

  fireEvent.change(component.getByLabelText("Test"));

  component.unmount();
});
4

1 回答 1

3

解决方案是直接访问属性，而不是通过 setAttribute 方法。这将做我想做的事情并在 onchange 处理程序中让我 e.currentTarget.checked === true 。

更新：这是旧版本的库，大约 3.xy 在新版本中我不做下面描述的事情，只使用 fireEvent.click；

/* SOLUTION */

  component.getByLabelText("Test").checked = true;
  fireEvent.change(component.getByLabelText("Test"));
/* SOLUTION */
于 2018-06-08T08:40:36.843 回答