React下拉框change事件Jest测试报错：找不到元素及无法触发事件

问题场景 #

使用Jest和React Testing Library为React下拉框的选项变更事件编写单元测试时，先后遇到两个报错：

1. 使用getByTestId时：

TestingLibraryElementError: Unable to find an element by: [data-testid="Oshop"]

2. 改用queryByTestId时：

Unable to fire a "change" event - please provide a DOM element.

组件代码 #

import React,{useState} from "react";
import "./App.css";

function App() {
  const [value, setValue] = useState("fruit")

  function selectionChange(params) {
    console.log(params)
    setValue(params)
  }
  return (
    <div className="App">
      <div>
        <select data-test-id="Oshop" onChange={(e) => selectionChange(e.target.value)}>
          <option value="fruit">Fruit</option>

          <option value="vegetable">Vegetable</option>

          <option value="meat">Meat</option>
        </select>
      </div>
    </div>
  );
}

export default App;

原测试代码 #

import { fireEvent, render, screen } from '@testing-library/react';
import App from './App';

test('testing onchange event for oshop', () => {
  render(<App />);
  const dropdElement = screen.queryByTestId("Oshop")
  fireEvent.change(dropdElement,{target:{value:"meat"}})
  expect(dropdElement.value).toBe("meat")
});

错误原因分析 #

• 第一个报错原因：React Testing Library的getByTestId/queryByTestId默认查找的是data-testid属性（驼峰式），但组件里的下拉框使用的是data-test-id（短横线式），属性名不匹配，导致无法找到目标元素。
• 第二个报错原因：queryByTestId在找不到元素时会返回null，此时调用fireEvent.change(null, ...)就会触发"需要提供DOM元素"的报错。

解决方案 #

步骤1：统一测试属性名 #

将组件中的data-test-id改为data-testid，和React Testing Library的查询规则保持一致：

<select data-testid="Oshop" onChange={(e) => selectionChange(e.target.value)}>

步骤2：修正测试代码逻辑 #

使用getByTestId（找不到元素时直接抛出明确错误，更利于调试），并确保获取到元素后再执行事件触发：

import { fireEvent, render, screen } from '@testing-library/react';
import App from './App';

test('testing onchange event for oshop', () => {
  render(<App />);
  // 使用getByTestId确保找到元素，找不到时直接抛出清晰错误
  const dropdElement = screen.getByTestId("Oshop");
  // 触发change事件
  fireEvent.change(dropdElement, { target: { value: "meat" } });
  // 验证下拉框值是否更新
  expect(dropdElement.value).toBe("meat");
  // 额外验证组件内部state是否更新（可选，更全面）
  expect(screen.getByRole('option', { name: 'Meat' }).selected).toBe(true);
});

补充说明 #

• React Testing Library的查询方法优先推荐使用语义化查询（如getByRole），如果必须使用测试ID，需严格遵循data-testid的属性命名规范。
• getBy*系列方法在找不到元素时会直接抛出错误，适合断言元素存在的场景；queryBy*则返回null，适合断言元素不存在的场景。

内容的提问来源于stack exchange，提问作者Kartik Dolas