Update dependencies and clean up tests

package.json

@@ -49,24 +49,25 @@
   },
   "devDependencies": {
     "@satel/eslint-config-ts-react": "3.3.1",
-    "@shopify/jest-dom-mocks": "2.8.10",
-    "@shopify/polaris": "4.16.0",
-    "@testing-library/dom": "7.0.4",
-    "@testing-library/react": "10.0.1",
-    "@testing-library/user-event": "10.0.0",
-    "@types/jest": "25.1.4",
-    "@types/react": "16.9.23",
-    "@types/react-dom": "16.9.5",
+    "@shopify/jest-dom-mocks": "2.9.0",
+    "@shopify/polaris": "4.25.0",
+    "@testing-library/dom": "7.10.1",
+    "@testing-library/jest-dom": "5.9.0",
+    "@testing-library/react": "10.2.0",
+    "@testing-library/user-event": "11.2.1",
+    "@types/jest": "25.2.3",
+    "@types/react": "16.9.35",
+    "@types/react-dom": "16.9.8",
     "auto-changelog": "1.16.2",
     "env-cmd": "10.1.0",
     "eslint": "6.8.0",
     "formik": "2.1.4",
     "jest-environment-jsdom-sixteen": "1.0.3",
-    "react": "16.13.0",
-    "react-dom": "16.13.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
     "release-it": "12.4.3",
-    "tsdx": "0.12.3",
+    "tsdx": "0.13.2",
     "tslib": "1.11.1",
-    "typescript": "3.8.3"
+    "typescript": "3.9.5"
   }
 }

test/TextField.test.tsx

@@ -1,17 +1,15 @@
 /* eslint-env jest */
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { act, fireEvent } from '@testing-library/react';
+import { act } from '@testing-library/react';
 
 import { matchMedia } from '@shopify/jest-dom-mocks';
 
+import { FormikProps } from 'formik';
 import { render, cleanup } from './test-utils';
 import { TextField } from '../src';
 import { BasicForm } from './util';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { waitFor } = require('@testing-library/react');
-
 afterEach(cleanup);
 
 describe('<TextField />', () => {
@@ -33,78 +31,47 @@ describe('<TextField />', () => {
     getByLabelText('test');
   });
 
-  it('updates formik values when typed in', async () => {
-    const onSubmit = jest.fn();
-    const str = 'Hello there';
+  it('updates formik state', async () => {
+    const ref = React.createRef<FormikProps<any>>();
 
-    const { getByLabelText, getByTestId } = render(
-      <BasicForm onSubmit={onSubmit}>
-        <TextField label="test" name="test" />
-        <input type="submit" data-testid="submit" />
+    const { getByLabelText } = render(
+      <BasicForm formikRef={ref}>
+        <TextField label="text" name="text" />
       </BasicForm>,
     );
 
-    const input = getByLabelText('test');
-    const button = getByTestId('submit');
+    await userEvent.type(getByLabelText('text'), 'Hello, World!');
 
-    act(() => {
-      userEvent.type(input, str);
-    });
+    expect(getByLabelText('text')).toHaveAttribute('value', 'Hello, World!');
+    expect(ref.current?.values).toEqual({ text: 'Hello, World!' });
+  });
 
-    expect((input as HTMLInputElement).value).toEqual(str);
+  it('encodes and decodes', async () => {
+    const ref = React.createRef<FormikProps<any>>();
 
-    act(() => {
-      userEvent.click(button);
-    });
+    function encode(raw: string) {
+      return raw.toUpperCase();
+    }
 
-    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
-    expect(onSubmit.mock.calls[0][0]).toEqual({ test: str });
-  });
+    function decode(value: string) {
+      return value.toLowerCase();
+    }
 
-  it('correctly encodes and decodes values', async () => {
-    const onSubmit = jest.fn();
-    const toType = 'hello,there';
-
-    const { getByLabelText, getByTestId } = render(
-      <BasicForm
-        initialValues={{ test: { foo: 0, bar: 1 } }}
-        onSubmit={onSubmit}
-      >
-        <TextField<{ [key: string]: number }>
-          label="test"
-          name="test"
-          decode={val => Object.keys(val).join(',')}
-          encode={str =>
-            str
-              .split(',')
-              .map(s => s.trim())
-              .reduce((acc, s, i) => ({ ...acc, [s]: i }), {})
-          }
-        />
-        <input type="submit" data-testid="submit" />
+    const { getByLabelText } = render(
+      <BasicForm formikRef={ref} initialValues={{ text: 'HELLO' }}>
+        <TextField label="text" name="text" encode={encode} decode={decode} />
       </BasicForm>,
     );
 
-    const input = getByLabelText('test');
-    const button = getByTestId('submit');
-
-    expect((input as HTMLInputElement).value).toEqual('foo,bar');
-
-    act(() => {
-      fireEvent.change(input, { target: { value: '' } });
-    });
-
-    act(() => {
-      userEvent.type(input, toType);
-    });
-
-    expect((input as HTMLInputElement).value).toEqual(toType);
+    expect(getByLabelText('text')).toHaveAttribute('value', 'hello');
+    expect(ref.current?.values).toEqual({ text: 'HELLO' });
 
-    act(() => {
-      userEvent.click(button);
-    });
+    await act(async () => userEvent.clear(getByLabelText('text')));
+    expect(getByLabelText('text')).toHaveAttribute('value', '');
+    expect(ref.current?.values).toEqual({ text: '' });
 
-    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
-    expect(onSubmit.mock.calls[0][0]).toEqual({ test: { hello: 0, there: 1 } });
+    await userEvent.type(getByLabelText('text'), 'Hello, World!');
+    expect(getByLabelText('text')).toHaveAttribute('value', 'hello, world!');
+    expect(ref.current?.values).toEqual({ text: 'HELLO, WORLD!' });
   });
 });

test/test-utils.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import React, { ReactNode } from 'react';
 import { render, RenderOptions } from '@testing-library/react';
 import { AppProvider } from '@shopify/polaris';

test/util.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject } from 'react';
 import { Formik, FormikHelpers, Form } from 'formik';
 
 export interface BasicFormProps<V = any> {
   children: ReactNode;
   initialValues?: V;
   onSubmit?: (values: V, formikHelpers: FormikHelpers<V>) => void;
-  formRef?: any;
+  formikRef?: RefObject<any>;
 }
 
 // eslint-disable-next-line import/prefer-default-export
@@ -16,11 +16,17 @@ export function BasicForm<V = any>(props: BasicFormProps<V>) {
       throw new Error('Submit not handled');
     },
     children,
+    formikRef,
   }: BasicFormProps<V> = props;
 
   return (
     <Formik<V> initialValues={initialValues} onSubmit={onSubmit}>
-      {() => <Form>{children}</Form>}
+      {formik => {
+        if (formikRef) {
+          (formikRef as any).current = formik;
+        }
+        return <Form>{children}</Form>;
+      }}
     </Formik>
   );
 }