如何为返回含DOM元素对象的函数编写React单元测试

你的测试失败核心原因是 toBe 断言检查的是引用相等性——它要求两个值是内存中完全相同的对象。每次调用 formatResult 都会生成一个全新的 React 元素对象，哪怕输入完全一致，这个对象的引用也和你 mockResponse 里的 renderElement 不一样，所以 toBe 永远会返回 false。

解决方法 #

方法一：改用 toEqual 进行深度比较（需注意局限性）

如果你一定要对比 React 元素的结构，可以把 toBe 换成 toEqual，它会深度比较对象的属性值。但要注意，React 元素包含 _owner、key 等内部属性，这些属性可能和你的 mock 对象不一致（哪怕渲染结果完全相同）。要让这个方法生效，你 mockResponse 里的 renderElement 必须和 formatResult 返回的结构完全一致。

方法二：渲染 renderElement 并验证 UI 输出（推荐，符合 RTL 设计理念）

React Testing Library 的核心思想是测试用户实际看到的 UI，而非实现细节。更可靠的做法是渲染 renderElement，然后用 RTL 的查询方法验证其内容：

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

it('转换响应数据正确', () => {
  const result = transformResponse(mockResult, mockTab, 'test');
  
  // 先验证基础属性
  expect(result).toEqual(
    expect.arrayContaining([
      expect.objectContaining({
        value: "40577570",
        label: "test"
      })
    ])
  );
  
  // 渲染 renderElement 并验证内容
  const [item] = result;
  render(item.renderElement);
  
  // 断言 DOM 元素存在
  expect(screen.getByTestId('entitySearch-data')).toBeInTheDocument();
  // 断言文本内容正确
  expect(screen.getByText('sample name')).toBeInTheDocument();
});

如果 formatResult 会根据 searchText 高亮文本（比如你 mock 里的 css-f3tk0d 类），可以补充断言：

expect(screen.getByText('test')).toHaveClass('css-f3tk0d');

总结 #

• 避免直接用 toBe 或 toEqual 对比 React 元素对象，这种方式脆弱且容易受 React 内部实现变化影响。
• 优先采用渲染元素并验证 UI 输出的方式，这更贴近用户实际使用场景，也更稳定。
• 对于非元素属性，用 expect.arrayContaining 和 expect.objectContaining 进行模糊匹配即可。

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