Merge pull request #10742 from marmelab/fix-tests-with-rhf-7.56

Fix compatibility of unit tests with react-hook-form 7.56.x

Author: djhi

packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx

@@ -170,42 +170,41 @@ describe('useReferenceInputController', () => {
         );
 
         await waitFor(() => {
-            expect(children.mock.calls.length).toBeGreaterThanOrEqual(3);
+            expect(children).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    allChoices: [
+                        { id: 1, title: 'foo' },
+                        { id: 2, title: 'bar' },
+                    ],
+                    availableChoices: [
+                        { id: 1, title: 'foo' },
+                        { id: 2, title: 'bar' },
+                    ],
+                    selectedChoices: [{ id: 1, title: 'foo' }],
+                    displayedFilters: {},
+                    error: null,
+                    filter: {},
+                    filterValues: {},
+                    isFetching: false,
+                    isLoading: false,
+                    page: 1,
+                    perPage: 25,
+                    hasPreviousPage: false,
+                    hasNextPage: false,
+                    hideFilter: expect.any(Function),
+                    setFilters: expect.any(Function),
+                    setPage: expect.any(Function),
+                    setPerPage: expect.any(Function),
+                    setSort: expect.any(Function),
+                    showFilter: expect.any(Function),
+                    sort: { field: 'title', order: 'ASC' },
+                    refetch: expect.any(Function),
+                    resource: 'posts',
+                    source: 'post_id',
+                    total: 2,
+                })
+            );
         });
-        expect(children).toHaveBeenCalledWith(
-            expect.objectContaining({
-                allChoices: [
-                    { id: 1, title: 'foo' },
-                    { id: 2, title: 'bar' },
-                ],
-                availableChoices: [
-                    { id: 1, title: 'foo' },
-                    { id: 2, title: 'bar' },
-                ],
-                selectedChoices: [{ id: 1, title: 'foo' }],
-                displayedFilters: {},
-                error: null,
-                filter: {},
-                filterValues: {},
-                isFetching: false,
-                isLoading: false,
-                page: 1,
-                perPage: 25,
-                hasPreviousPage: false,
-                hasNextPage: false,
-                hideFilter: expect.any(Function),
-                setFilters: expect.any(Function),
-                setPage: expect.any(Function),
-                setPerPage: expect.any(Function),
-                setSort: expect.any(Function),
-                showFilter: expect.any(Function),
-                sort: { field: 'title', order: 'ASC' },
-                refetch: expect.any(Function),
-                resource: 'posts',
-                source: 'post_id',
-                total: 2,
-            })
-        );
     });
 
     it('should refetch reference getList when its props change', async () => {

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx

@@ -18,7 +18,7 @@ import { SimpleForm } from '../../form';
 import { ArrayInput } from './ArrayInput';
 import { TextInput } from '../TextInput';
 import { SimpleFormIterator } from './SimpleFormIterator';
-import { Basic } from './SimpleFormIterator.stories';
+import { Basic, WithFormDataConsumer } from './SimpleFormIterator.stories';
 
 describe('<SimpleFormIterator />', () => {
     // bypass confirm leave form with unsaved changes
@@ -471,32 +471,7 @@ describe('<SimpleFormIterator />', () => {
     });
 
     it('should not reapply default values set at form level after removing and then re-adding one row, even with FormDataConsumer', async () => {
-        render(
-            <Wrapper>
-                <SimpleForm
-                    defaultValues={{
-                        emails: [{ email: '[email protected]', name: 'test' }],
-                    }}
-                >
-                    <ArrayInput source="emails">
-                        <SimpleFormIterator>
-                            <FormDataConsumer>
-                                {() => (
-                                    <>
-                                        <TextInput
-                                            source="email"
-                                            label="Email"
-                                            defaultValue="[email protected]"
-                                        />
-                                        <TextInput source="name" label="Name" />
-                                    </>
-                                )}
-                            </FormDataConsumer>
-                        </SimpleFormIterator>
-                    </ArrayInput>
-                </SimpleForm>
-            </Wrapper>
-        );
+        render(<WithFormDataConsumer />);
 
         const removeFirstButton = getByLabelText(
             // @ts-ignore

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Typography } from '@mui/material';
+import { Button, Card, Typography } from '@mui/material';
 
 import { Edit } from '../../detail';
 import { SimpleForm } from '../../form';
@@ -9,6 +9,11 @@ import { TextInput } from '../TextInput';
 import { AdminContext } from '../../AdminContext';
 import { defaultTheme } from '../../theme/defaultTheme';
 import { useSimpleFormIteratorItem } from './useSimpleFormIteratorItem';
+import {
+    FormDataConsumer,
+    ResourceContextProvider,
+    testDataProvider,
+} from 'ra-core';
 
 export default { title: 'ra-ui-materialui/input/SimpleFormIterator' };
 
@@ -231,3 +236,34 @@ export const UseSimpleFormIteratorItem = () => (
         </SimpleFormIterator>
     </Wrapper>
 );
+
+export const WithFormDataConsumer = () => (
+    <AdminContext dataProvider={testDataProvider()}>
+        <ResourceContextProvider value="posts">
+            <Card>
+                <SimpleForm
+                    defaultValues={{
+                        emails: [{ email: '[email protected]', name: 'test' }],
+                    }}
+                >
+                    <ArrayInput source="emails">
+                        <SimpleFormIterator>
+                            <FormDataConsumer>
+                                {() => (
+                                    <>
+                                        <TextInput
+                                            source="email"
+                                            label="Email"
+                                            defaultValue="[email protected]"
+                                        />
+                                        <TextInput source="name" label="Name" />
+                                    </>
+                                )}
+                            </FormDataConsumer>
+                        </SimpleFormIterator>
+                    </ArrayInput>
+                </SimpleForm>
+            </Card>
+        </ResourceContextProvider>
+    </AdminContext>
+);

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx

@@ -111,7 +111,7 @@ export const SimpleFormIterator = (inProps: SimpleFormIteratorProps) => {
                     !Children.only(children).props.source &&
                     // Make sure it's not a FormDataConsumer
                     // @ts-ignore
-                    !Children.only(children).type !== FormDataConsumer
+                    Children.only(children).type !== FormDataConsumer
                 ) {
                     // ArrayInput used for an array of scalar values
                     // (e.g. tags: ['foo', 'bar'])

packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx

@@ -605,7 +605,7 @@ export const InsideReferenceArrayInputDefaultValue = ({
                             id: 1,
                             title: 'War and Peace',
                             // trigger default value
-                            author: undefined,
+                            authors: undefined,
                             summary:
                                 "War and Peace broadly focuses on Napoleon's invasion of Russia, and the impact it had on Tsarist society. The book explores themes such as revolution, revolution and empire, the growth and decline of various states and the impact it had on their economies, culture, and society.",
                             year: 1869,

packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx

@@ -69,6 +69,8 @@ describe('<FilterButton />', () => {
             expect(checkboxes[1].getAttribute('aria-checked')).toBe('false');
             expect(checkboxes[2].getAttribute('aria-checked')).toBe('false');
 
+            // wait for a bit before clicking the checkbox again
+            await new Promise(resolve => setTimeout(resolve, 510));
             fireEvent.click(checkboxes[0]);
 
             await waitFor(
@@ -103,6 +105,8 @@ describe('<FilterButton />', () => {
                 name: 'Title',
             });
 
+            // wait for a bit before removing the filter
+            await new Promise(resolve => setTimeout(resolve, 510));
             fireEvent.click(screen.getByTitle('Remove this filter'));
 
             await waitFor(
@@ -135,6 +139,8 @@ describe('<FilterButton />', () => {
 
             await screen.findByText('1-1 of 1');
 
+            // wait for a bit before changing the filters again
+            await new Promise(resolve => setTimeout(resolve, 510));
             fireEvent.click(await screen.findByLabelText('Add filter'));
             fireEvent.click(screen.getAllByRole('menuitemcheckbox')[2]);
             fireEvent.change(
@@ -149,6 +155,8 @@ describe('<FilterButton />', () => {
                 'No Posts found using the current filters.'
             );
 
+            // wait for a bit before changing the filters again
+            await new Promise(resolve => setTimeout(resolve, 510));
             fireEvent.click(screen.getAllByTitle('Remove this filter')[1]);
             await screen.findByText('1-1 of 1');
 
@@ -163,9 +171,8 @@ describe('<FilterButton />', () => {
                 { timeout: 2000 }
             );
 
-            // Wait for a bit
+            // wait for a bit before changing the filters again
             await new Promise(resolve => setTimeout(resolve, 510));
-
             fireEvent.click(screen.getByTitle('Remove this filter'));
             await screen.findByText('1-10 of 13');
 

yarn.lock

@@ -9947,18 +9947,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fdir@npm:^6.4.3":
-  version: 6.4.3
-  resolution: "fdir@npm:6.4.3"
-  peerDependencies:
-    picomatch: ^3 || ^4
-  peerDependenciesMeta:
-    picomatch:
-      optional: true
-  checksum: d13c10120e9625adf21d8d80481586200759928c19405a816b77dd28eaeb80e7c59c5def3e2941508045eb06d34eb47fad865ccc8bf98e6ab988bb0ed160fb6f
-  languageName: node
-  linkType: hard
-
 "fdir@npm:^6.4.4":
   version: 6.4.4
   resolution: "fdir@npm:6.4.4"
@@ -18685,17 +18673,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.12":
-  version: 0.2.12
-  resolution: "tinyglobby@npm:0.2.12"
-  dependencies:
-    fdir: "npm:^6.4.3"
-    picomatch: "npm:^4.0.2"
-  checksum: 7c9be4fd3625630e262dcb19015302aad3b4ba7fc620f269313e688f2161ea8724d6cb4444baab5ef2826eb6bed72647b169a33ec8eea37501832a2526ff540f
-  languageName: node
-  linkType: hard
-
-"tinyglobby@npm:^0.2.13":
+"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.13":
   version: 0.2.13
   resolution: "tinyglobby@npm:0.2.13"
   dependencies: