TestingLibraryElementError排查：无法定位文本为Assets的元素

问题现象 #

使用React Testing Library测试Assets组件时，抛出TestingLibraryElementError，提示无法找到文本为"Assets"的元素，且文本可能被多个元素拆分。

失败原因 #

• 自定义渲染函数未生效：测试中的renderer函数仅创建了JSX结构，但未调用React Testing Library的render方法，也没有返回渲染结果，导致screenRender为undefined，后续调用getByText直接报错。
• Redux Store不合法：store被定义为数组[{}]，但Redux的Provider需要接收合法的Redux store实例，错误的store会导致组件上下文异常，影响渲染。
• 冗余的异步标记：测试无异步操作，却给测试函数添加async，可能干扰测试执行流程。

解决方案 #

1. 修复自定义渲染逻辑 #

引入React Testing Library的render方法，让renderer函数正确调用render并返回结果，确保所有Provider正确包裹目标组件。

2. 配置合法的模拟Redux Store #

使用redux-mock-store生成模拟store实例，避免传入非法的数组类型。如果组件依赖Redux状态，可以在模拟store中添加对应初始值。

3. 移除不必要的异步标记 #

测试无异步操作时，删除async关键字，保证测试流程正常。

修改后的完整测试代码 #

import React from 'react';
import Assets from './Assets';
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { MaterialUIControllerProvider } from 'context';
import { ThemeProvider, CssBaseline } from '@mui/material';
import { default: themeRtl } from 'assets/theme/theme-rtl';
import configureStore from 'redux-mock-store';

// 创建模拟Redux store
const mockStore = configureStore([]);
const store = mockStore({});

// 修复后的自定义渲染函数
const renderer = (component) => {
  return render(
    <Provider store={store}>
      <BrowserRouter>
        <MaterialUIControllerProvider>
          <ThemeProvider theme={themeRtl}>
            <CssBaseline />
            {component}
          </ThemeProvider>
        </MaterialUIControllerProvider>
      </BrowserRouter>
    </Provider>
  );
};

test('renders the "Assets" heading', () => {
  renderer(<Assets />);
  // 直接通过screen获取元素
  const headingElement = screen.getByText('Assets');
  expect(headingElement).toBeInTheDocument();
});

可选优化：文本查找容错 #

如果仍存在文本拆分问题，可以使用正则表达式或角色定位来提升查找可靠性：

// 忽略大小写的正则匹配
const headingElement = screen.getByText(/assets/i);

// 通过heading角色和名称定位
const headingElement = screen.getByRole('heading', { name: 'Assets', level: 5 });

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