如何将Enzyme的shallow测试代码转换为React Testing Library实现？

改写后代码 #

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

const renderComponent = (jsx) => {
  // RTL 无官方浅层渲染等价API，默认全量渲染真实DOM
  const { ...renderResult } = render(jsx);
  
  // 此处为对齐原有逻辑保留类名查询，实际使用更推荐面向用户的查询方式
  const title = screen.getByClassName('tile-bottom__title');
  const content = screen.getByClassName('tile-bottom__text');

  return {
    // 此处返回RTL原生渲染结果，包含rerender、unmount等常用操作方法
    component: renderResult,
    title,
    content,
  };
};

提示：如果测试场景中title或content可能是条件渲染不存在，可以把getByClassName替换为queryByClassName，元素不存在时会返回null不会抛出错误。

核心改动说明 #

• 替换Enzyme的shallow方法为RTL的render方法：RTL官方不提供浅层渲染能力，认为浅层渲染会让测试和实际用户行为脱节，默认全量渲染真实DOM节点
• 元素查询逻辑调整：原有component.find是Enzyme的实例查询方法，RTL推荐用全局screen对象查询元素，查询优先级建议按 角色查询 > 标签文本查询 > 测试ID查询 > 类名/标签名查询 排序，类名查询属于兜底方案
• 返回值调整：RTL没有Enzyme的组件实例对象，返回的是RTL原生渲染结果，包含rerender、unmount、container等常用方法，可直接用于后续测试逻辑

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