React-admin的Edit/Create组件Vitest单元测试报错求助

组件结构 #

<Edit>
  <SimpleForm>
    .....
  </SimpleForm>
</Edit>

测试代码片段 #

describe(......
     it('.....', () => { 
       render(
         <AdminContext dataProvider={...someDataProvider...}>
           <MyEditComponent />
         </AdminContext>
       )
      })
)......

报错信息 #

TypeError: Cannot read properties of undefined (reading 'toLowerCase') 
❯ Object._apply_rules node_modules/inflection/lib/inflection.js:594:53
❯ Object.singularize node_modules/inflection/lib/inflection.js:692:24
❯ node_modules/ra-core/src/core/useGetResourceLabel.ts:46:44 
❯ useEditController node_modules/ra-core/src/controller/edit/useEditController.ts:113:15 
❯ EditBase node_modules/ra-core/src/controller/edit/EditBase.tsx:42:46 
❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 
❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 
❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 
❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 
❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12

环境信息 #

• React-admin版本：4.16.0
• React版本：18.2.0

解决思路 #

错误根源是Edit组件缺少必要的resource属性，导致react-admin内部调用inflection.singularize时传入了undefined，触发toLowerCase读取错误。

解决步骤：

1. 给测试中的MyEditComponent传入resource和id属性（二者均为Edit组件必填项），示例：

<MyEditComponent resource="posts" id="1" />

2. 可选：在AdminContext中配置对应资源的元数据，确保资源标签能被正确识别：

<AdminContext 
  dataProvider={someDataProvider}
  resources={[{ name: 'posts', label: '文章' }]}
>
  <MyEditComponent resource="posts" id="1" />
</AdminContext>

添加属性后，react-admin就能正确识别资源类型，避免调用singularize时传入undefined的问题。

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