React-Admin单元测试失败：升级至4.8后加载提示无法匹配

问题背景 #

将React-Admin从4.6版本升级至4.8版本后，原本正常的单元测试突然失败，无法匹配指定的加载提示文本。

测试代码 #

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

test('render app', async () => {
  render(
    <AdminContext>
      <App />
    </AdminContext>
  )
  const linkElement = await 
    screen.findByText(/The page is loading, just a moment please/i);
  expect(linkElement).toBeInTheDocument();
});

报错信息 #

FAIL src/App.test.js (16.248 s)
  ● render app
    Unable to find an element 
      with the text: /The page is loading, just a moment please/i. 
    This could be because the text is broken up by multiple elements. 
    In this case, you can provide a function for your text matcher to 
      make your matcher more flexible.
    Ignored nodes: comments, script, style
    <body>
      <div>
        <div
          class="MuiScopedCssBaseline-root css-vv3oxb-MuiScopedCssBaseline-root"
        />
      </div>
    </body>
      11 |     </AdminContext>
      12 |   )
    > 13 |   const linkElement = await 
            screen.findByText(/The page is loading, just a moment please/i);
         |                                    ^
      14 |   expect(linkElement).toBeInTheDocument();
      15 | });
      16 |
      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:166:27)
      at findByText (node_modules/@testing-library/dom/dist/query-helpers.js:86:33)
      at Object.<anonymous> (src/App.test.js:13:36)
Test Suites: 1 failed, 1 passed, 2 total

当前依赖版本 #

"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",

可能原因 #

• React-Admin 4.8调整了加载组件的渲染逻辑：加载提示仅在实际触发加载状态时才会渲染，或文本被拆分为多个DOM元素
• AdminContext初始化参数变化：4.8版本需要更多必填上下文参数，否则加载组件无法正常渲染
• Testing Library v14与React-Admin 4.8存在兼容性问题，文本查询逻辑受影响

解决方法 #

1. 模拟加载状态 #

React-Admin 4.8可能要求明确的加载状态才会渲染提示文本，可通过给AdminContext传入isLoading参数模拟：

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

test('render app', async () => {
  render(
    <AdminContext value={{ isLoading: true }}>
      <App />
    </AdminContext>
  );
  const loadingText = await screen.findByText(/The page is loading, just a moment please/i);
  expect(loadingText).toBeInTheDocument();
});

2. 使用灵活的文本匹配方式 #

若文本被拆分到多个DOM元素，改用回调函数或容器查询：

// 方式1：回调函数匹配包含目标文本的元素
const loadingText = await screen.findByText((content) => content.includes('The page is loading'));

// 方式2：先找加载容器，再检查文本内容
const loadingContainer = await screen.findByRole('status');
expect(loadingContainer).toHaveTextContent(/The page is loading, just a moment please/i);

3. 补充AdminContext必填参数 #

React-Admin 4.8可能需要dataProvider等核心provider才能初始化组件，添加mock provider：

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

// 模拟空的dataProvider
const mockDataProvider = {
  getList: () => Promise.resolve({ data: [], total: 0 }),
  getOne: () => Promise.resolve({ data: {} }),
  create: () => Promise.resolve({ data: {} }),
  update: () => Promise.resolve({ data: {} }),
  delete: () => Promise.resolve({ data: {} }),
};

test('render app', async () => {
  render(
    <AdminContext value={{ dataProvider: mockDataProvider, isLoading: true }}>
      <App />
    </AdminContext>
  );
  const loadingText = await screen.findByText(/The page is loading, just a moment please/i);
  expect(loadingText).toBeInTheDocument();
});

4. 降级Testing Library版本（临时方案） #

若为兼容性问题，可将@testing-library/react降级至v13.x：

npm install @testing-library/react@13.4.0

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