如何解决Jest测试时出现“serializes to the same string”报错

问题根因 #

你原来的两种测试写法都不符合React组件测试的规范：

• 直接用toStrictEqual比对两个JSX元素会失败：JSX本质是React.createElement返回的普通对象，哪怕渲染出来的DOM结构完全一致，React会给每个JSX元素添加私有属性（如_owner、实例标识等），深度全等比对会因为这些隐藏属性的差异报错。
• toMatchInlineSnapshot用法错误：该API不需要手动传入预期JSX，首次运行会自动生成快照写入测试文件，手动传入JSX会导致类型不匹配，哪怕内容看起来完全一致也会报错。

方案1：用@testing-library/react做行为断言（推荐） #

这是React官方推荐的测试方式，直接模拟组件渲染后断言实际行为和展示结果，测试更可靠。

前置依赖 #

如果还没安装对应工具，先执行安装：

npm install @testing-library/react @testing-library/jest-dom --save-dev

测试用例示例 #

import { render, screen } from '@testing-library/react';
import { convertHyperlinks } from './你的文件路径';

// 测试纯链接场景
test('纯链接文本会被正确包裹为a标签', () => {
  render(convertHyperlinks('http://stackoverflow.com'));
  const link = screen.getByRole('link', { name: 'stackoverflow.com' });
  expect(link).toBeInTheDocument();
  expect(link).toHaveAttribute('href', 'http://stackoverflow.com');
  expect(link).toHaveAttribute('target', '_blank');
});

// 测试普通文本+链接混合场景
test('混合文本和链接会被正确拆分处理', () => {
  render(convertHyperlinks('个人主页：http://github.com 欢迎访问'));
  expect(screen.getByText('个人主页：')).toBeInTheDocument();
  const link = screen.getByRole('link', { name: 'github.com' });
  expect(link).toHaveAttribute('href', 'http://github.com');
  expect(screen.getByText(' 欢迎访问')).toBeInTheDocument();
});

// 测试无链接的纯文本场景
test('无链接的纯文本会被包裹在span内', () => {
  const testText = '这是一段没有链接的普通文本';
  render(convertHyperlinks(testText));
  expect(screen.getByText(testText)).toBeInTheDocument();
});

方案2：用快照测试做结构校验 #

如果你需要直接校验整体DOM结构，可以用react-test-renderer把返回的React节点转成纯JSON结构后做快照比对。

前置依赖 #

npm install react-test-renderer --save-dev

测试用例示例 #

import renderer from 'react-test-renderer';
import { convertHyperlinks } from './你的文件路径';

test('convertHyperlinks输出结构符合快照预期', () => {
  const tree = renderer.create(convertHyperlinks('http://stackoverflow.com')).toJSON();
  // 首次执行会自动生成下面的快照内容，不需要手动填写
  expect(tree).toMatchInlineSnapshot(`
    <span>
      <a
        href="http://stackoverflow.com"
        target="_blank"
      >
        stackoverflow.com
      </a>
    </span>
  `);
});

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