[RFR] Migrate tests to react-testing-library

packages/ra-core/src/core/RoutesWithLayout.spec.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { Route, MemoryRouter } from 'react-router-dom';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
-import { mount } from 'enzyme';
+import { render, cleanup } from '@testing-library/react';
 import assert from 'assert';
 
 import RoutesWithLayout from './RoutesWithLayout';
 
 describe('<RoutesWithLayout>', () => {
+    afterEach(cleanup);
+
     const Dashboard = () => <div>Dashboard</div>;
     const Custom = ({ name }) => <div>Custom</div>;
     const FirstResource = ({ name }) => <div>Default</div>;
@@ -20,7 +22,7 @@ describe('<RoutesWithLayout>', () => {
     }));
 
     it('should show dashboard on / when provided', () => {
-        const wrapper = mount(
+        const { queryByText } = render(
             <Provider store={store}>
                 <MemoryRouter initialEntries={['/']}>
                     <RoutesWithLayout dashboard={Dashboard}>
@@ -31,11 +33,12 @@ describe('<RoutesWithLayout>', () => {
                 </MemoryRouter>
             </Provider>
         );
-        assert.equal(wrapper.find(Dashboard).length, 1);
+
+        assert.notEqual(queryByText('Dashboard'), null);
     });
 
     it('should show the first resource on / when there is only one resource and no dashboard', () => {
-        const wrapper = mount(
+        const { queryByText } = render(
             <Provider store={store}>
                 <MemoryRouter initialEntries={['/']}>
                     <RoutesWithLayout>
@@ -45,11 +48,11 @@ describe('<RoutesWithLayout>', () => {
             </Provider>
         );
 
-        assert.equal(wrapper.find(FirstResource).length, 1);
+        assert.notEqual(queryByText('Default'), null);
     });
 
     it('should show the first resource on / when there are multiple resource and no dashboard', () => {
-        const wrapper = mount(
+        const { queryByText } = render(
             <Provider store={store}>
                 <MemoryRouter initialEntries={['/']}>
                     <RoutesWithLayout>
@@ -61,15 +64,15 @@ describe('<RoutesWithLayout>', () => {
             </Provider>
         );
 
-        assert.equal(wrapper.find(FirstResource).length, 1);
-        assert.equal(wrapper.find(Resource).length, 0);
+        assert.notEqual(queryByText('Default'), null);
+        assert.equal(queryByText('Resource'), null);
     });
 
     it('should accept custom routes', () => {
         const customRoutes = [
             <Route key="custom" path="/custom" component={Custom} />,
         ]; // eslint-disable-line react/jsx-key
-        const wrapper = mount(
+        const { queryByText } = render(
             <Provider store={store}>
                 <MemoryRouter initialEntries={['/custom']}>
                     <RoutesWithLayout customRoutes={customRoutes}>
@@ -80,6 +83,6 @@ describe('<RoutesWithLayout>', () => {
                 </MemoryRouter>
             </Provider>
         );
-        assert.equal(wrapper.find(Custom).length, 1);
+        assert.notEqual(queryByText('Custom'), null);
     });
 });

packages/ra-core/src/form/FormField.spec.tsx

@@ -1,21 +1,45 @@
 import assert from 'assert';
-import { shallow } from 'enzyme';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { Form } from 'react-final-form';
 import React from 'react';
 import FormField from './FormField';
 
 describe('<FormField>', () => {
-    const Foo = () => <div />;
+    afterEach(cleanup);
+
+    const Foo = ({ input }) => <input type="text" {...input} />;
+
     it('should render a <Field/> component for the input component', () => {
-        const wrapper = shallow(<FormField source="title" component={Foo} />);
-        const component = wrapper.find('Field');
-        assert.equal(component.length, 1);
-        assert.equal(wrapper.prop('component'), Foo);
+        let formApi;
+        const { getByRole } = render(
+            <Form
+                onSubmit={jest.fn()}
+                render={({ form }) => {
+                    formApi = form;
+                    return <FormField source="title" component={Foo} />;
+                }}
+            />
+        );
+        const input = getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'Lorem' } });
+        assert.equal(formApi.getState().values.title, 'Lorem');
     });
-    it('should not render a <Field /> component the field has an input', () => {
-        const wrapper = shallow(
-            <FormField source="title" component={Foo} input={{}} />
+
+    it('should not render a <Field /> component if the field has an input', () => {
+        let formApi;
+        const { getByRole } = render(
+            <Form
+                onSubmit={jest.fn()}
+                render={({ form }) => {
+                    formApi = form;
+                    return (
+                        <FormField source="title" component={Foo} input={{}} />
+                    );
+                }}
+            />
         );
-        const component = wrapper.find('Field');
-        assert.equal(component.length, 0);
+        const input = getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'Lorem' } });
+        assert.notEqual(formApi.getState().values.title, 'Lorem');
     });
 });

packages/ra-ui-materialui/src/button/CloneButton.spec.tsx

@@ -1,19 +1,28 @@
 import expect from 'expect';
-import { shallow } from 'enzyme';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
 
 import { CloneButton } from './CloneButton';
 
+const theme = createMuiTheme();
+
 describe('<CloneButton />', () => {
     it('should pass a clone of the record in the location state', () => {
-        const wrapper = shallow(
-            <CloneButton record={{ id: 123, foo: 'bar' }} basePath="" />
+        const history = createMemoryHistory();
+        const { getByRole } = render(
+            <Router history={history}>
+                <ThemeProvider theme={theme}>
+                    <CloneButton record={{ id: 123, foo: 'bar' }} basePath="" />
+                </ThemeProvider>
+            </Router>
         );
 
-        expect(wrapper.prop('to')).toEqual(
-            expect.objectContaining({
-                search: 'source=%7B%22foo%22%3A%22bar%22%7D',
-            })
+        const button = getByRole('button');
+        expect(button.getAttribute('href')).toEqual(
+            '/create?source=%7B%22foo%22%3A%22bar%22%7D'
         );
     });
 });

packages/ra-ui-materialui/src/detail/SimpleShowLayout.spec.js

@@ -1,18 +1,18 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import SimpleShowLayout from './SimpleShowLayout';
 import TextField from '../field/TextField';
 
 describe('<SimpleShowLayout />', () => {
     it('should display children inputs of SimpleShowLayout', () => {
-        const wrapper = shallow(
-            <SimpleShowLayout>
+        const { queryByText } = render(
+            <SimpleShowLayout record={{ foo: 'foo', bar: 'bar' }}>
                 <TextField source="foo" />
                 <TextField source="bar" />
             </SimpleShowLayout>
         );
-        const inputs = wrapper.find('EnhancedTextField');
-        expect(inputs.map(i => i.prop('source'))).toEqual(['foo', 'bar']);
+        expect(queryByText('foo')).not.toBeNull();
+        expect(queryByText('bar')).not.toBeNull();
     });
 });

packages/ra-ui-materialui/src/field/FunctionField.spec.js

@@ -1,26 +1,27 @@
 import React from 'react';
 import assert from 'assert';
-import { render, shallow } from 'enzyme';
+import { render, cleanup } from '@testing-library/react';
 import FunctionField from './FunctionField';
 
 describe('<FunctionField />', () => {
+    afterEach(cleanup);
+
     it('should render using the render function', () => {
         const record = { foo: 'bar' };
-        const wrapper = render(
+        const { queryByText } = render(
             <FunctionField record={record} render={r => r.foo.substr(0, 2)} />
         );
-        assert.equal(wrapper.text(), 'ba');
+        assert.notEqual(queryByText('ba'), null);
     });
 
-    it('should use custom className', () =>
-        assert.deepEqual(
-            shallow(
-                <FunctionField
-                    record={{ foo: true }}
-                    render={r => r.foo.substr(0, 2)}
-                    className="foo"
-                />
-            ).prop('className'),
-            'foo'
-        ));
+    it('should use custom className', () => {
+        const { queryByText } = render(
+            <FunctionField
+                record={{ foo: 'bar' }}
+                render={r => r.foo}
+                className="foo"
+            />
+        );
+        assert.ok(queryByText('bar').classList.contains('foo'));
+    });
 });

packages/ra-ui-materialui/src/list/DatagridCell.spec.js

@@ -1,12 +1,21 @@
 import assert from 'assert';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { shallow } from 'enzyme';
+import { render, cleanup } from '@testing-library/react';
 
 import DatagridCell from './DatagridCell';
 
+const renderWithTable = element =>
+    render(
+        <table>
+            <tbody>
+                <tr>{element}</tr>
+            </tbody>
+        </table>
+    );
+
 describe('<DatagridCell />', () => {
-    const Field = () => <div />;
+    const Field = ({ basePath }) => <div>{basePath}</div>;
     Field.propTypes = {
         type: PropTypes.string,
         basePath: PropTypes.string,
@@ -16,25 +25,24 @@ describe('<DatagridCell />', () => {
         type: 'foo',
     };
 
-    it('should render as a mui <TableRowColumn /> component', () => {
-        const wrapper = shallow(<DatagridCell field={<Field />} />);
-        const col = wrapper.find('WithStyles(ForwardRef(TableCell))');
-        assert.equal(col.length, 1);
+    it('should render as a mui <TableCell /> component', () => {
+        const { getByRole } = renderWithTable(
+            <DatagridCell field={<Field />} />
+        );
+        assert.equal(getByRole('cell').className, 'MuiTableCell-root');
     });
 
     it('should pass the Datagrid basePath by default', () => {
-        const wrapper = shallow(
+        const { queryByText } = renderWithTable(
             <DatagridCell basePath="default" field={<Field />} />
         );
-        const col = wrapper.find('Field');
-        assert.equal(col.prop('basePath'), 'default');
+        assert.notEqual(queryByText('default'), null);
     });
 
     it('should allow to overwrite the `basePath` field', () => {
-        const wrapper = shallow(
+        const { queryByText } = renderWithTable(
             <DatagridCell basePath="default" field={<Field basePath="new" />} />
         );
-        const col = wrapper.find('Field');
-        assert.equal(col.prop('basePath'), 'new');
+        assert.notEqual(queryByText('new'), null);
     });
 });

packages/ra-ui-materialui/src/list/PaginationActions.spec.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, cleanup } from '@testing-library/react';
 
 import PaginationActions from './PaginationActions';
 
 describe('<PaginationActions />', () => {
+    afterEach(cleanup);
+
     it('should not render any actions when no pagination is necessary', () => {
-        const wrapper = shallow(
+        const { queryAllByRole } = render(
             <PaginationActions
                 page={0}
                 rowsPerPage={20}
@@ -15,13 +17,11 @@ describe('<PaginationActions />', () => {
                 classes={{}}
             />
         );
-        expect(wrapper.find('WithStyles(ForwardRef(Button))')).toHaveLength(0);
-        expect(wrapper.find('WithStyles(ForwardRef(Typography))')).toHaveLength(
-            0
-        );
+        expect(queryAllByRole('button')).toHaveLength(0);
     });
+
     it('should render action buttons when pagination is necessary', () => {
-        const wrapper = shallow(
+        const { queryAllByRole } = render(
             <PaginationActions
                 page={0}
                 rowsPerPage={5}
@@ -32,11 +32,11 @@ describe('<PaginationActions />', () => {
             />
         );
         // 1 2 3 next
-        expect(wrapper.find('WithStyles(ForwardRef(Button))')).toHaveLength(4);
+        expect(queryAllByRole('button')).toHaveLength(4);
     });
 
     it('should skip page action buttons when there are too many', () => {
-        const wrapper = shallow(
+        const { queryAllByRole } = render(
             <PaginationActions
                 page={7}
                 rowsPerPage={1}
@@ -47,6 +47,6 @@ describe('<PaginationActions />', () => {
             />
         );
         // prev 1 ... 7 8 9 ... 15 next
-        expect(wrapper.find('WithStyles(ForwardRef(Button))')).toHaveLength(7);
+        expect(queryAllByRole('button')).toHaveLength(7);
     });
 });