元素的selected属性（而非selected HTML特性）来准确验证选项状态的正确方法，避免了测试失败的常见陷阱。1. 理解React Testing Library中表单元素测试的挑战
在前端应用开发中，下拉框是常见的ui组件，其测试对于确保用户交互的正确性至关重要。react testing library (rtl) 旨在模拟用户行为，并鼓励开发者测试组件的最终用户可访问状态。然而，在测试元素时，开发者常会遇到一些困惑，尤其是在验证选项是否被正确选中时。
一个常见的误区是试图通过检查DOM元素的HTML属性（如hasAttribute('selected')）来判断一个是否被选中。在某些情况下，DOM的selected属性可能不会被动态更新，或者其存在与否并不能完全代表选项的实际选中状态。正确的做法是检查DOM元素的J*aScript属性，例如optionElement.selected，它能更准确地反映元素的当前状态。
2. 常见测试陷阱与不推荐的实践
在尝试测试下拉框时，开发者可能会尝试以下方法，但这些方法往往会导致测试失败或产生误导性结果：
2.1 使用userEvent.selectOptions并检查HTML属性 import React from "react";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
test("Can Select Item - Incorrect Assertion", async () => {
const user = userEvent.setup();
const screen = render(
<select data-testid={"test"}>
<option value="1" data-testid={"Hey"}>
Hey
</option>
<option value="2">There</option>
</select>
);
await user.selectOptions(screen.getByTestId("test"), "Hey");
// 错误示范：检查hasAttribute('selected')可能无法反映真实状态
expect(screen.getByTestId("Hey").hasAttribute("selected")).toBeTruthy();
}); 上述测试中，即使userEvent.selectOptions成功触发了选择事件，screen.getByTestId("Hey").hasAttribute("selected")也可能返回false，导致测试失败。这是因为selected HTML属性在某些浏览器或测试环境中可能不会被DOM动态添加或移除，而J*aScript的selected属性才是可靠的指示器。
2.2 使用fireEvent.select并检查HTML属性
类似地，直接使用fireEvent.select来触发选择事件，然后检查HTML属性也会遇到同样的问题：
import React from "react";
import { fireEvent, render } from "@testing-library/react";
test("Can Select Item with fireEvent - Incorrect Assertion", async () => {
const screen = render(
<select data-testid={"test"}>
<option value="1" data-testid={"Hey"}>
Hey
</option>
<option value="2">There</option>
</select>
);
fireEvent.select(screen.getByTestId("test"), { target: { value: "1" } });
// 错误示范：同样是检查hasAttribute('selected')
expect(screen.getByTestId("Hey").hasAttribute("selected")).toBeTruthy();
}); 尽管fireEvent.select成功模拟了选择事件，hasAttribute("selected")的检查依然是不可靠的，因为它依赖于HTML属性而非元素的实际J*aScript状态。
一款在线照片和视频编辑工具，允许用户创建AI头像
109
查看详情
3. 正确的测试方法：模拟事件并检查selected属性
要正确测试下拉框的选择行为，核心在于两点：
使用fireEvent.select或userEvent.selectOptions来模拟用户选择事件。
通过访问元素的selected J*aScript属性 来验证其选中状态。
以下是实现这一目标的推荐方法：
import React from "react";
import { fireEvent, render } from "@testing-library/react";
// 定义一个接口，用于更清晰地表示选项的状态
export interface KeyValuePair {
value: string;
selected: boolean;
}
it("should correctly set selected option in a dropdown", () => {
// 渲染包含select和option元素的组件
const { getByTestId, getAllByTestId } = render(
<select data-testid={"select"}>
<option>Test option selects</option> {/* 默认选项，无value */}
<option key={"1"} value="1" data-testid={"select-option"}>
Hey
</option>
<option key={"2"} value="2" data-testid={"select-option"}>
There
</option>
</select>
);
// 1. 模拟用户选择事件
// 使用 fireEvent.select 触发 select 元素的 change 事件
// target.value 应设置为要选中的 option 的 value
fireEvent.select(getByTestId("select"), { target: { value: "1" } });
// 2. 获取所有 option 元素并检查其选中状态
// getAllByTestId 返回一个数组，确保获取所有具有相同 data-testid 的元素
let options = getAllByTestId("select-option") as HTMLOptionElement[];
// 3. 过滤出所有被选中的 option
const values = options
.map(
(e) =>
({
value: e.value,
selected: e.selected, // 关键：检查 option 元素的 J*aScript 'selected' 属性
} as KeyValuePair)
)
.filter((x) => x.selected);
// 4. 执行断言
// 确保只有一个选项被选中
expect(values).toH*eLength(1);
// 确保被选中的选项的 value 是我们期望的
expect(values[0].value).toBe("1");
}); 代码解析：
fireEvent.select(getByTestId("select"), { target: { value: "1" } }); : 这行代码模拟了用户在元素上选择一个值为"1"的选项。target: { value: "1" }是模拟change事件时传递给事件处理器的值，表示新的选中值。
getAllByTestId("select-option") : 获取所有带有data-testid="select-option"的元素。这允许我们遍历所有可选项。
e.selected : 这是核心所在。HTMLOptionElement对象有一个selected属性，它是一个布尔值，准确地指示该选项当前是否被选中。这是验证选项状态的可靠方式，因为它直接反映了DOM元素的J*aScript状态，而不是可能不一致的HTML属性。
filter((x) => x.selected) : 过滤出所有selected属性为true的选项。
expect(values).toH*eLength(1) : 断言只有一个选项被选中，符合单选下拉框的预期行为。
expect(values[0].value).toBe("1") : 断言被选中的选项的value是"1"，验证了我们期望的选项确实被选中。
4. 总结与最佳实践
在React Testing Library中测试下拉框时，请记住以下关键点：
模拟用户行为 ：使用fireEvent.select或userEvent.selectOptions来触发选择事件。userEvent通常更接近真实用户交互，但对于简单的select事件，fireEvent.select也完全适用。
检查J*aScript属性，而非HTML属性 ：在验证的选中状态时，务必检查optionElement.selected这个J*aScript属性，而不是optionElement.hasAttribute('selected')。selected属性是布尔类型，直接反映了元素的当前状态，比HTML属性更可靠。
明确断言 ：通过过滤出所有选中的选项并检查其数量和值，可以对下拉框的选择行为进行清晰且健壮的断言。
考虑默认选项 ：如果你的有默认选中的选项，确保在测试开始时验证其初始状态，并在模拟用户交互后验证其新状态。
遵循这些指南，你将能够编写出更稳定、更准确的React Testing Library测试，确保你的组件按预期工作。
