如何使React Testing Library完整渲染第三方UI组件的DOM结构？

使用的技术版本：

• Typescript 5.3.3
• React 18.2.0
• ts-jest 29.1.2

场景说明 #

已安装公司内部私有UI设计库作为Node模块，现有组件Foo.tsx代码如下：

import React from 'react'
import '@company/lib'
export const Foo: React.FC = () => {
  return <company-lib-bar items={[{name:'hello'},{name:'world'}]} />
}

该私有库实际会渲染的DOM结构为：

<div data-testid='name-list'>
  <div data-testid='name'>hello</div>
  <div data-testid='name'>world</div>
</div>

测试代码及问题 #

使用@testing-library/react编写的测试代码：

import React from 'react'
import { render } from '@testing-library/react'
import {Foo} from './Foo'
describe('NavigationVertical component', () => {
 it('render',()=>{
   const {debug}=render(<Foo />)
   debug()
 })
})

控制台输出仅显示组件标签，未渲染实际DOM：

<body><div><company-lib-bar items={[{name:'hello'},{name:'world'}]} /></div></body>

期望debug()输出完整DOM结构：

<body>
<div>
<div data-testid='name-list'>
  <div data-testid='name'>hello</div>
  <div data-testid='name'>world</div>
</div>
</div>
</body>

解决方案 #

1. 确保私有库适配测试环境 #

私有UI库若使用TypeScript等预编译语言，需确认其构建产物包含可在Node.js/测试环境执行的代码（如CommonJS格式）。若库的入口指向未编译源码，测试环境无法解析，会导致仅输出组件标签而非实际DOM。

2. 配置Jest处理私有库模块 #

若私有库依赖CSS、SVG等资源，需在jest.config.js中添加对应规则：

module.exports = {
  testEnvironment: 'jsdom', // 确保测试环境为jsdom，支持DOM渲染
  moduleNameMapper: {
    '\\.(css|less|scss|svg)$': 'identity-obj-proxy', // 忽略样式/资源文件
  },
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest', // 处理库中的JSX代码
  },
  transformIgnorePatterns: [
    '/node_modules/(?!@company/lib)/', // 不对私有库做转换忽略，确保Jest编译它
  ],
}

3. 验证全局导入的组件注册 #

代码中import '@company/lib'属于全局导入，若库注册的是Web Components：

• 需在测试文件顶部引入polyfill：import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
• 确保jsdom环境支持自定义元素（Jest默认jsdom环境已支持，但需确认未修改配置）

若库注册的是React全局组件，需确认@company/lib确实在测试环境中完成了组件注册，而非仅在浏览器环境生效。

4. 替代方案（若上述方法不可行） #

如果私有库本身不支持测试环境渲染，可采用以下方式：

• 直接通过测试ID断言：无需依赖debug输出，用getAllByTestId('name')验证列表项是否存在
• Mock私有组件：模拟组件渲染出期望的DOM，同时验证props传递是否正确：

jest.mock('@company/lib', () => ({
  __esModule: true,
  companyLibBar: (props: any) => (
    <div data-testid='name-list'>
      {props.items.map((item: any) => (
        <div data-testid='name' key={item.name}>{item.name}</div>
      ))}
    </div>
  ),
}))

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