测试复选框是否有 defaultChecked 时如何检查复选框？

Question

这是我正在努力实现的演示：link

问题是，我发现如果没有 defaultChecked 属性，我可以更改值并选中复选框，但这是遗留代码，我不能轻易将其删除，我需要它属性那里。

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

我开玩笑地使用 react-testing-library。

演示代码在这里：

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();
});

Answer 1

解决方案是直接访问属性，而不是通过 setAttribute method.This 将执行我想要的操作，并在 onchange 处理程序中让我 e.currentTarget.checked === true。

更新：这是针对 3.x.y 左右的旧版本库。在新版本中我不做下面描述的事情，只使用 fireEvent.click;

/* SOLUTION */

  component.getByLabelText("Test").checked = true;
  fireEvent.change(component.getByLabelText("Test"));
/* SOLUTION */

测试复选框是否有 defaultChecked 时如何检查复选框？

How to check checkbox when testing if it has defaultChecked?

javascript

unit-testing

reactjs

react-testing-library