@testing-library/react中替代react-native toJSON方法的方案咨询

在React Native的Testing Library里，你用toJSON序列化组件渲染结果做对比的方式，在React Testing Library里有两种等价方案：

方案一：直接使用render返回的toJSON方法 #

和React Native的用法完全一致，@testing-library/react的render函数同样会返回toJSON方法，它会把组件渲染结果序列化为纯JS对象，忽略DOM节点的内部引用和额外属性，只保留结构和内容：

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

const { toJSON } = render(<HocMyComponent text="should be as is" />);
const { toJSON: expectedToJSON } = render(<span>should be as is</span>);

expect(toJSON()).toStrictEqual(expectedToJSON());

方案二：结合react-test-renderer序列化 #

如果因为版本或配置问题无法直接使用render返回的toJSON，可以单独用react-test-renderer来序列化组件：

import renderer from 'react-test-renderer';

const component = renderer.create(<HocMyComponent text="should be as is" />);
const expectedComponent = renderer.create(<span>should be as is</span>);

expect(component.toJSON()).toStrictEqual(expectedComponent.toJSON());

为什么asFragment会失败？ #

你之前用asFragment失败的核心原因是：asFragment返回的是真实的DOM片段对象，每个render调用都会生成全新的DOM节点，这些节点的内存引用不同，而且DOM节点还包含React内部添加的属性（比如内部标识、事件监听等），所以即使结构和文本完全一致，toStrictEqual也会判定为不相等。而toJSON是把渲染结果序列化为纯JS对象，只对比组件的结构、文本和可见属性，不会受DOM节点引用或内部属性的影响。

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