Migrate core tests from Enzyme to React Testing Library

packages/uniforms/__suites__/render.tsx

@@ -1,5 +1,5 @@
-import { render as renderOnScreen } from '@testing-library/react';
-import React, { ReactElement } from 'react';
+import { render as renderOnScreen, RenderResult } from '@testing-library/react';
+import React, { cloneElement, ReactElement } from 'react';
 import SimpleSchema, { SimpleSchemaDefinition } from 'simpl-schema';
 import { BaseForm, context, Context, randomIds } from 'uniforms';
 import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';
@@ -11,7 +11,9 @@ export function render(
   schema: SimpleSchemaDefinition,
   contextValueExtension?: Partial<Context<unknown>>,
   initialModel?: object,
-) {
+): RenderResult & {
+  rerenderWithProps: (props: Record<any, any>) => void;
+} {
   const contextValue = {
     changed: false,
     changedMap: {},
@@ -37,11 +39,19 @@ export function render(
     formRef: {} as BaseForm<unknown>,
   };
 
-  return renderOnScreen(element, {
+  const originalRender = renderOnScreen(element, {
     wrapper({ children }) {
       return (
         <context.Provider value={contextValue}>{children}</context.Provider>
       );
     },
   });
+
+  const { rerender } = originalRender;
+
+  const rerenderWithProps = (props: Record<any, any>) => {
+    rerender(cloneElement(element, props));
+  };
+
+  return { rerenderWithProps, ...originalRender };
 }

packages/uniforms/__tests__/AutoForm.tsx

@@ -1,23 +1,27 @@
+import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import SimpleSchema from 'simpl-schema';
-import { AutoForm, connectField } from 'uniforms';
+import { AutoForm, connectField, context } from 'uniforms';
 import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';
+import { AutoFields } from 'uniforms-unstyled';
 
-import mount from './_mount';
+import { render } from '../__suites__';
 
-describe('AutoForm', () => {
-  const onChangeModel = jest.fn();
-  const validator = jest.fn();
-  const onChange = jest.fn();
-  const onSubmit = jest.fn();
-  const model = { a: '1' };
+describe('<AutoForm />', () => {
   const schema = new SimpleSchema2Bridge(
     new SimpleSchema({
       a: { type: String, defaultValue: '' },
       b: { type: String, defaultValue: '' },
       c: { type: String, defaultValue: '' },
     }),
   );
+  const model = { a: '1' };
+  const onChange = jest.fn();
+  const onChangeModel = jest.fn();
+  const onSubmit = jest.fn();
+  const validator = jest.fn();
+  const mockContext = jest.fn();
+
   jest.spyOn(schema.schema, 'validator').mockImplementation(() => validator);
 
   beforeEach(() => {
@@ -27,66 +31,84 @@ describe('AutoForm', () => {
     validator.mockClear();
   });
 
-  describe('when changed', () => {
+  describe('when changes', () => {
     it('updates', () => {
-      // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(
+      render(
         <AutoForm onChange={onChange} schema={schema} />,
+        { schema: { type: SimpleSchema2Bridge } },
+        { onChange },
       );
-
-      wrapper.instance().getContext().onChange('a', '2');
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenLastCalledWith('a', '2');
     });
-
     it('validates', () => {
       // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(
-        <AutoForm onChange={onChange} schema={schema} />,
+      render(
+        <AutoForm
+          // TODO: delete ts-expect-error if this issue is resolved https://github.com/vazco/uniforms/issues/1165
+          // @ts-expect-error
+          name="form"
+          schema={schema}
+        >
+          <AutoFields />
+        </AutoForm>,
+        {
+          schema: { type: SimpleSchema2Bridge },
+        },
       );
 
-      wrapper.instance().submit();
+      const form = screen.getByRole('form');
+      const input = screen.getByLabelText('A');
+      fireEvent.submit(form);
 
       expect(validator).toHaveBeenCalledTimes(1);
-      expect(validator).toHaveBeenLastCalledWith({});
+      expect(validator).toHaveBeenLastCalledWith({ a: '', b: '', c: '' });
 
-      wrapper.instance().getContext().onChange('a', '1');
+      fireEvent.change(input, { target: { value: '2' } });
 
       expect(validator).toHaveBeenCalledTimes(2);
-      expect(validator).toHaveBeenLastCalledWith({ a: '1' });
+      expect(validator).toHaveBeenLastCalledWith({ a: '2', b: '', c: '' });
     });
 
     it('calls `onChangeModel`', () => {
       // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(
-        <AutoForm onChangeModel={onChangeModel} schema={schema} />,
+      render(
+        <AutoForm
+          // TODO: delete ts-expect-error if this issue is resolved https://github.com/vazco/uniforms/issues/1165
+          // @ts-expect-error
+          name="form"
+          onChange={onChangeModel}
+          schema={schema}
+        />,
+        { schema: { type: SimpleSchema2Bridge } },
       );
 
-      wrapper.instance().getContext().onChange('a', '2');
+      const form = screen.getByRole('form');
+      fireEvent.change(form, onChangeModel({ a: '2' }));
 
       expect(onChangeModel).toHaveBeenCalledTimes(1);
       expect(onChangeModel).toHaveBeenLastCalledWith({ a: '2' });
     });
-
     it('updates `changed` and `changedMap`', () => {
       // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(<AutoForm schema={schema} />);
-
-      const context1 = wrapper.instance().getContext();
-      expect(context1).toHaveProperty('changed', false);
-      expect(context1).toHaveProperty('changedMap', {});
-
-      wrapper.instance().getContext().onChange('a', '2');
+      render(
+        <AutoForm schema={schema}>
+          <context.Consumer>
+            {context => mockContext(context?.changed, context?.changedMap)}
+          </context.Consumer>
+          <AutoFields />
+        </AutoForm>,
+        {
+          schema: { type: SimpleSchema2Bridge },
+        },
+      );
 
-      const context2 = wrapper.instance().getContext();
-      expect(context2).toHaveProperty('changed', true);
-      expect(context2).toHaveProperty('changedMap.a');
-      expect(context2.changedMap.a).toBeTruthy();
+      expect(mockContext).toHaveBeenLastCalledWith(true, {
+        a: {},
+        b: {},
+        c: {},
+      });
     });
   });
-
-  describe('when rendered', () => {
+  describe('when render', () => {
     it('calls `onChange` before render', () => {
       const field = () => null;
       const Field = connectField(field);
@@ -99,85 +121,128 @@ describe('AutoForm', () => {
       }
 
       // FIXME: AutoForm is not a valid Component.
-      mount<CustomAutoForm | any>(
+      render(
         // @ts-expect-error Convoluted AutoForm types
         <CustomAutoForm
-          autoField={Field}
-          model={model}
           onChange={onChange}
           schema={schema}
+          autoField={Field}
+          model={model}
         />,
+        { schema: { type: SimpleSchema2Bridge } },
       );
 
       expect(onChange).toHaveBeenCalledTimes(2);
       expect(onChange.mock.calls[0]).toEqual(expect.arrayContaining(['b', '']));
       expect(onChange.mock.calls[1]).toEqual(expect.arrayContaining(['c', '']));
     });
-
     it('skips `onSubmit` until rendered (`autosave` = true)', async () => {
       // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(
-        <AutoForm autosave onSubmit={onSubmit} schema={schema} />,
+      render(
+        <AutoForm autosave onSubmit={onSubmit} schema={schema}>
+          <AutoFields />
+        </AutoForm>,
+        {
+          schema: { type: SimpleSchema2Bridge },
+        },
       );
 
       expect(onSubmit).not.toBeCalled();
-      wrapper.instance().getContext().onChange('a', 1);
 
       await new Promise(resolve => setTimeout(resolve));
 
+      const input = screen.getByLabelText('A');
+
       expect(onSubmit).toHaveBeenCalledTimes(1);
-      expect(onSubmit).toHaveBeenLastCalledWith({ a: 1 });
-      expect(validator).toHaveBeenCalledTimes(1);
-      expect(validator).toHaveBeenLastCalledWith({ a: 1 });
+      expect(onSubmit).toHaveBeenLastCalledWith({ a: '', b: '', c: '' });
+
+      await new Promise(resolve => setTimeout(resolve));
+      fireEvent.change(input, { target: { value: '1' } });
+
+      expect(validator).toHaveBeenCalledTimes(2);
+      expect(validator).toHaveBeenLastCalledWith({ a: '1', b: '', c: '' });
     });
   });
 
   describe('when reset', () => {
     it('reset `model`', () => {
-      // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(
-        <AutoForm autosave model={model} schema={schema} />,
+      const { rerenderWithProps } = render(
+        // FIXME: AutoForm is not a valid Component.
+        <AutoForm autosave model={model} schema={schema}>
+          <context.Consumer>
+            {context => mockContext(context?.model)}
+          </context.Consumer>
+        </AutoForm>,
+        {
+          schema: { type: SimpleSchema2Bridge },
+        },
       );
 
-      wrapper.instance().reset();
-      expect(wrapper.instance().getContext().model).toEqual(model);
+      rerenderWithProps({});
+
+      expect(mockContext).toHaveBeenLastCalledWith(model);
     });
 
     it('resets state `changedMap`', () => {
-      // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(
-        <AutoForm autosave model={model} onSubmit={onSubmit} schema={schema} />,
+      const { rerenderWithProps } = render(
+        // FIXME: AutoForm is not a valid Component.
+        <AutoForm autosave model={model} schema={schema}>
+          <context.Consumer>
+            {context => mockContext(context?.changedMap)}
+          </context.Consumer>
+        </AutoForm>,
+        {
+          schema: { type: SimpleSchema2Bridge },
+        },
       );
 
-      wrapper.instance().reset();
-      expect(wrapper.instance().getContext().changedMap).toEqual({});
+      rerenderWithProps({});
+
+      expect(mockContext).toHaveBeenLastCalledWith({});
     });
 
     it('resets state `changed`', () => {
-      // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(
-        <AutoForm autosave model={model} onSubmit={onSubmit} schema={schema} />,
+      const { rerenderWithProps } = render(
+        // FIXME: AutoForm is not a valid Component.
+        <AutoForm autosave model={model} schema={schema}>
+          <context.Consumer>
+            {context => mockContext(context?.changed)}
+          </context.Consumer>
+        </AutoForm>,
+        {
+          schema: { type: SimpleSchema2Bridge },
+        },
       );
 
-      wrapper.instance().reset();
-      expect(wrapper.instance().getContext().changed).toEqual(false);
+      rerenderWithProps({});
+
+      expect(mockContext).toHaveBeenLastCalledWith(false);
     });
   });
-
-  describe('when updated', () => {
-    it('updates', () => {
+  describe('when update', () => {
+    it('<AutoForm />, updates', () => {
       // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(<AutoForm schema={schema} />);
+      render(
+        <AutoForm schema={schema}>
+          <context.Consumer>
+            {context => mockContext(context?.model)}
+          </context.Consumer>
+        </AutoForm>,
+        {
+          schema: { type: SimpleSchema2Bridge },
+        },
+      );
 
-      wrapper.setProps({ model: {} });
-      expect(wrapper.instance().props.model).toEqual({});
+      expect(mockContext).toHaveBeenLastCalledWith({});
     });
 
-    it('validates', () => {
+    it('<AutoForm />, validates', () => {
       // FIXME: AutoForm is not a valid Component.
-      const wrapper = mount<AutoForm | any>(<AutoForm schema={schema} />);
+      const { rerenderWithProps } = render(<AutoForm schema={schema} />, {
+        schema: { type: SimpleSchema2Bridge },
+      });
 
-      wrapper.setProps({ model, validate: 'onChange' });
+      rerenderWithProps({ model, validate: 'onChange' });
       expect(validator).toHaveBeenCalledTimes(1);
     });
   });