React Testing Library中Select下拉框选项测试指南

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

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

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 元素的 JavaScript 'selected' 属性
        } as KeyValuePair)
    )
    .filter((x) => x.selected);

  // 4. 执行断言
  // 确保只有一个选项被选中
  expect(values).toHaveLength(1);
  // 确保被选中的选项的 value 是我们期望的
  expect(values[0].value).toBe("1");
});