如何在React Testing Library快照中完整展示对象属性？

问题本质 #

你遇到的情况是因为React自定义组件的props不会被渲染为真实DOM属性，Testing Library返回的container是真实DOM节点，序列化时会把对象props调用toString()转成[object Object]。要验证props是否正确传递，有两种更可靠的方式：

方法一：模拟子组件并直接断言props（推荐） #

这种方式不需要依赖快照，直接验证子组件是否接收到正确的props，逻辑更清晰：

1. 模拟AnotherChildComponent组件，用jest.mock替换它的实现
2. 渲染Button组件后，检查子组件的调用参数

import { render } from '@testing-library/react';
import Button from './Button';
import AnotherChildComponent from './AnotherChildComponent';

// 模拟子组件，返回空内容避免干扰UI结构
jest.mock('./AnotherChildComponent', () => ({
  __esModule: true,
  default: jest.fn(() => null),
}));

describe('<Button />', () => {
  it('正确传递customCss props给子组件', () => {
    const testCustomCss = { color: 'blue' };
    render(<Button customCss={testCustomCss} />);

    // 验证子组件被调用，且包含目标props
    expect(AnotherChildComponent).toHaveBeenCalledWith(
      expect.objectContaining({ customCss: testCustomCss }),
      expect.anything() // 忽略React传递的其他参数（如context）
    );
  });
});

方法二：自定义Jest快照序列化器（若坚持用快照） #

如果你一定要通过快照展示完整的对象内容，可以自定义Jest的快照序列化器，将对象props转为JSON字符串后再序列化：

步骤1：创建自定义序列化器文件 #

在项目根目录新建jest-serializer-custom-props.js：

module.exports = {
  // 判断是否需要处理当前值
  test(val) {
    // 匹配你的子组件，可根据实际情况调整判断条件
    return val?.type?.name === 'AnotherChildComponent' && val?.props?.customCss;
  },
  // 自定义序列化逻辑
  print(val, serialize) {
    // 复制原元素，将customCss转为JSON字符串
    const modifiedProps = {
      ...val.props,
      customCss: JSON.stringify(val.props.customCss)
    };
    const modifiedElement = { ...val, props: modifiedProps };
    // 调用默认序列化器处理修改后的元素
    return serialize(modifiedElement);
  },
};

步骤2：配置Jest使用该序列化器 #

在jest.config.js（或package.json的jest配置项）中添加：

module.exports = {
  snapshotSerializers: ['<rootDir>/jest-serializer-custom-props.js'],
};

步骤3：改用react-test-renderer生成快照 #

因为Testing Library的container是真实DOM，无法直接获取React组件的props，需要用react-test-renderer渲染React元素树：

import renderer from 'react-test-renderer';
import Button from './Button';

describe('<Button />', () => {
  it('快照中显示完整的customCss props', () => {
    const tree = renderer.create(<Button customCss={{ color: 'blue' }} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

此时生成的快照会展示customCss={"color":"blue"}，而不是[object Object]。

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