and thumbs up for your great work!
So I am trying to write some vitest unit test for an Edit component (and Create also) using the tutorial on your website. So having a resource, and an edit component as follows:
<Edit> <SimpleForm> ..... </SimpleForm> </Edit>
So, when I try to write a test as follows:
describe(......
it('.....', () => {
render(
<AdminContext dataProvider={...someDataProvider...}>
<MyEditComponent />
</AdminContext>
)
})
)......
I get the following error:
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
Other information:
Any ideas on this one?
Thanks in advance.
Thanks for sharing your solution.
Indeed this error is due to the fact that <Edit>
needs to know what the current resource
is. You can either declare a <Resource>
component with your edit view (what you ended up doing), but you can also provide the resource
manually, either via a <ResourceContextProvider>
or via the resource
prop.
The latter is what react-admin does in some of its stories (see an example):
export const InitialValue = () => (
<AdminContext
i18nProvider={i18nProvider}
dataProvider={
{
getOne: () => Promise.resolve({ data: { id: 1, gender: 'F' } }),
} as any
}
>
<Edit resource="posts" id="1">
<SimpleForm>
<SelectInput
source="gender"
choices={[
{ id: 'M', name: 'Male ' },
{ id: 'F', name: 'Female' },
]}
/>
<FormInspector name="gender" />
</SimpleForm>
</Edit>
</AdminContext>
);
This syntax has the advantage to be shorter, which is useful for unit testing.
Hope this helps.