React Testing Library渲染组件Props未正确传递问题排查

你测试输出的DOM里已经给出明确线索：存在带data-cy="__mocks___react-tippy_div"属性的空节点，说明Jest运行时自动加载了react-tippy库的mock版本（也就是你代码里Tooltip组件的依赖），但这个mock实现有缺陷——它没有渲染传入的children子节点，直接把所有包裹在Tooltip内的内容全部吞掉了。
你的TextField组件（对应DOM里wrappedEllipsis相关节点）内部大概率也用了react-tippy的Tooltip做长文本悬浮提示，传入的cellText文本本来是渲染在Tooltip内部的，因为mock的Tooltip是空壳，文本根本没被挂载到DOM上，自然会出现getByText(/test/i)找不到文本的报错。
至于客户端、Storybook运行正常，是因为这两个场景不会加载Jest的mock文件，用的是真实的react-tippy组件，会正常透传渲染子节点，不会出现内容丢失的问题。

• 先定位你的react-tippy mock实现：要么是项目__mocks__目录下存在对应手动mock文件，要么是jest配置里开启了对该依赖的自动mock。你当前的Tooltip mock大概率是类似下面的空实现：

  // 错误的mock：没有渲染children
  export const Tooltip = () => <div data-cy="__mocks___react-tippy_div" />
  

• 修正mock逻辑，补上children渲染即可，不需要引入真实tippy的复杂定位逻辑，满足单测DOM渲染要求就行：

  // 修正后的mock
  export const Tooltip = ({ children, title, ...restProps }) => {
    return (
      <div data-cy="__mocks___react-tippy_div" title={title}>
        {children} {/* 关键：透传渲染子内容 */}
      </div>
    )
  }
  export default Tooltip
  

• 如果你不需要在单测里mock react-tippy，也可以直接在对应测试文件顶部加一行取消mock的配置，用真实组件跑测试：

  jest.unmock('react-tippy')
  

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