TestCafe匹配嵌套React Link元素文本出现[object Object]报错如何解决

根因 #

你当前直接读取了React组件实例的statement属性值，该属性内嵌入的是未渲染的React Link组件对象，而非DOM渲染后的纯文本，做字符串对比时对象会被序列化为[object Object]，导致断言失败。

修复方法 #

方案1（推荐）：直接读取真实DOM的innerText做断言 #

E2E测试本身就应该验证用户实际看到的页面渲染内容，无需读取React组件内部属性：

// 替换为你的段落节点选择器逻辑
const targetPara = Selector('p.your-target-class');
// 直接断言DOM的innerText，此时Link已经被渲染为纯文本
await browser.expect(targetPara.innerText).eql('this is the mock text');

方案2：若必须读取React组件属性，先递归提取文本 #

如果你的测试逻辑要求必须从React组件属性侧验证，可以写工具函数递归提取所有React元素的文本内容：

// 递归提取React节点树的纯文本
function getReactText(node) {
  if (typeof node === 'string' || typeof node === 'number') return String(node);
  if (Array.isArray(node)) return node.map(getReactText).join('');
  if (node?.props?.children) return getReactText(node.props.children);
  return '';
}

// 处理后再断言
const rawStatement = (await Component.method).statement;
const actualText = getReactText(rawStatement);
await browser.expect(actualText).eql('this is the mock text');

方案2属于特殊场景的适配方案，测试准确性不如方案1，优先选方案1。

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