我已阅读this post,其中给出了以下示例:
import React from "react";
import { render, fireEvent } from "react-testing-library";
test("radio", () => {
const { getByLabelText } = render(
<form>
<label>
First <input type="radio" name="radio1" value="first" id="firstRadioId" />
</label>
<label>
Second <input type="radio" name="radio1" value="second" />
</label>
</form>
);
const radio = getByLabelText('First')
fireEvent.change(radio, { target: { value: "second" } });
expect(radio.value).toBe('second')
});
但这感觉有点奇怪,因为它不是测试点击的结果。而是直接将值设置为某个字符串。 但是,点击事件不起作用:
// ...
const radio = getByLabelText('First')
const radioSecond = getByLabelText('Second')
fireEvent.click(radioSecond);
expect(radio.value).toBe('second');
// ...
我不明白的是为什么document.getElementById('firstRadioId').checked
返回false。在浏览器中可以做到,如下面的示例所示:
https://codesandbox.io/s/silly-saha-xt0j7
在索引页面上,您看到radio.checked返回true。但是在测试中却没有。