Question

我想在fireEvent.click之后将单选按钮的aria-checked属性设置为true。我不想通过setAttribute来实现，而是通过onclick来实现。

我尝试了以下代码来测试我的组件。

Radiobutton.js

function Radiobutton(props) {
  const { label, onClick, onKeyPress, isChecked } = props;

  return (
    <div
      className="radiobutton"
      role="radio"
      onClick={onClick}
      onKeyDown={onKeyPress}
      aria-checked={isChecked}
      tabIndex={0}
      value={label}
    >
      <span className="radiobutton__label">{label}</span>
    </div>
  );
}

Radiobutton.test.jsx

test("radiobuttons must use click", () => {
  const handleChange = jest.fn();
  const { container } = render(
    <Radiobutton onClick={handleChange} isChecked={false} label="Dummy Radio" />
  );
  const radiobtn = getByRole(container, "radio");
  fireEvent.click(radiobtn);
  expect(handleChange).toHaveBeenCalledTimes(1);
  expect(radiobtn.getAttribute("aria-checked")).toBe("true");

});

我能够调用handleChange函数，但是无法更改aria-checked的值。我收到以下错误。

    expect(received).toBe(expected) // Object.is equality

    Expected: "true"
    Received: "false"

      30 |   expect(handleChange).toHaveBeenCalledTimes(1);
    > 31 |   expect(radiobtn.getAttribute("aria-checked")).toBe("true");
         |                                                 ^
      32 |   console.log(prettyDOM(radiobtn));
      33 | });

      at Object.toBe (src/__tests__/radiobutton.test.jsx:31:49)

我是测试新手。任何帮助将非常感激。预先感谢。

Answer 1

基于组件的代码处理，更改发生在父元素上。要在测试中模拟此行为，您需要在调用isChecked后更新handleChange prop。

最多maintainer's comment的实现方式是使用不同的道具将同一元素重新渲染到同一容器中：

test("radiobuttons must use click", () => {
  const handleChange = jest.fn();
  const { container } = render(
    <Radiobutton onClick={handleChange} isChecked={false} label="Dummy Radio" />
  );
  const radiobtn = getByRole(container, "radio");
  fireEvent.click(radiobtn);
  expect(handleChange).toHaveBeenCalledTimes(1);
  render(<Radiobutton onClick={handleChange} isChecked={true} label="Dummy Radio" />, { container });
  expect(radiobtn.getAttribute("aria-checked")).toBe("true");
});

您也可以在handleChange.mockImplementation内放置重新渲染逻辑，但我认为这会使测试用例更难以阅读：

test("radiobuttons must use click", () => {
  let isChecked = false;
  const handleChange = jest.fn();
  const { container } = render(
    <Radiobutton onClick={handleChange} isChecked={false} label="Dummy Radio" />
  );
  handleChange.mockImplementation(() => {
    isChecked = !isChecked;
    render(<Radiobutton onClick={handleChange} isChecked={isChecked} label="Dummy Radio" />, { container });
  });
  const radiobtn = getByRole(container, "radio");
  fireEvent.click(radiobtn);
  expect(handleChange).toHaveBeenCalledTimes(1);
  expect(radiobtn.getAttribute("aria-checked")).toBe("true");
});

另一个缺点是handleChange逻辑应该在父组件中的某个位置，因此您宁愿测试自己的模拟而不是测试您的应用。

对我来说，它看起来确实很凌乱，并且没有为您提供任何其他价值，因为在现实世界中，如果它在isChecked之后更新onClick，则取决于父组件。

因此，我建议您将测试用例一分为二。首先检查是否单击了呼叫onClick处理程序。并单独检查isChecked={true}是否提供aria-checked。甚至最好让第3位检查isChecked={false}是否未注入aria-checked属性。

test('provides aria-checked if isChecked is truly`, () => {
  const { container } = render(<Radiobutton isChecked={true} />);
  const radiobtn = getByRole(container, "radio");
  expect(radiobtn.getAttribute("aria-checked")).toBe("true");
});
test('does not provide aria-checked if isChecked is falsy`, () => {
  const { container } = render(<Radiobutton />);
  const radiobtn = getByRole(container, "radio");
  expect(radiobtn.getAttribute("aria-checked")).not.toBe("true");
});

在fireEvent之后将radio的aria-checked属性设置为true

1 个答案: