Update dependencies

package.json

@@ -34,7 +34,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
-    "test": "tsdx test --env=jsdom",
+    "test": "tsdx test --env=jest-environment-jsdom-sixteen",
     "lint": "eslint src/*.ts*",
     "release": "env-cmd env release-it"
   },
@@ -43,29 +43,30 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@shopify/polaris": ">=4",
-    "formik": ">=2.0",
+    "@shopify/polaris": ">=4.12",
+    "formik": ">=2.1",
     "react": ">=16.8"
   },
   "devDependencies": {
-    "@satel/eslint-config-ts-react": "3.2.0",
-    "@shopify/jest-dom-mocks": "2.8.7",
-    "@shopify/polaris": "4.10.2",
-    "@testing-library/dom": "6.11.0",
-    "@testing-library/react": "9.4.0",
-    "@testing-library/user-event": "8.0.3",
-    "@types/jest": "24.0.25",
-    "@types/react": "16.9.17",
-    "@types/react-dom": "16.9.4",
+    "@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",
     "auto-changelog": "1.16.2",
-    "env-cmd": "10.0.1",
+    "env-cmd": "10.1.0",
     "eslint": "6.8.0",
-    "formik": "2.1.1",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
+    "formik": "2.1.4",
+    "jest-environment-jsdom-sixteen": "1.0.3",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
     "release-it": "12.4.3",
-    "tsdx": "0.12.1",
-    "tslib": "1.10.0",
-    "typescript": "3.7.4"
+    "tsdx": "0.12.3",
+    "tslib": "1.11.1",
+    "typescript": "3.8.3"
   }
 }

src/Checkbox.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Checkbox as PolarisCheckbox } from '@shopify/polaris';
-import { BaseProps as PolarisCheckboxProps } from '@shopify/polaris/types/components/Checkbox/Checkbox';
+import {
+  Checkbox as PolarisCheckbox,
+  CheckboxProps as PolarisCheckboxProps,
+} from '@shopify/polaris';
 import { usePolarisField, UsePolarisFieldProps } from './usePolarisField';
 import { Omit, OmittedPolarisProps } from './types';
 

src/RangeSlider.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { RangeSlider as PolarisRangeSlider } from '@shopify/polaris';
 import {
+  RangeSlider as PolarisRangeSlider,
   RangeSliderProps as PolarisRangeSliderProps,
-  RangeSliderValue,
-} from '@shopify/polaris/types/components/RangeSlider';
+} from '@shopify/polaris';
 import { usePolarisField, UsePolarisFieldProps } from './usePolarisField';
 import { Omit, OmittedPolarisProps } from './types';
 
+export type RangeSliderValue = PolarisRangeSliderProps['value'];
+
 type Props<V> = UsePolarisFieldProps<V, RangeSliderValue> &
   PolarisRangeSliderProps;
 

src/Select.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Select as PolarisSelect } from '@shopify/polaris';
-import { BaseProps as PolarisSelectProps } from '@shopify/polaris/types/components/Select/Select';
+import {
+  Select as PolarisSelect,
+  SelectProps as PolarisSelectProps,
+} from '@shopify/polaris';
 import { Omit, OmittedPolarisProps } from './types';
 import { UsePolarisFieldProps, usePolarisField } from './usePolarisField';
 

src/TextField.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { TextField as PolarisTextField } from '@shopify/polaris';
-import { BaseProps as PolarisTextFieldProps } from '@shopify/polaris/types/components/TextField/TextField';
+import {
+  TextField as PolarisTextField,
+  TextFieldProps as PolarisTextFieldProps,
+} from '@shopify/polaris';
 import { usePolarisField, UsePolarisFieldProps } from './usePolarisField';
 import { Omit, OmittedPolarisProps } from './types';
 

test/TextField.test.tsx

@@ -1,13 +1,17 @@
 /* eslint-env jest */
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { wait } from '@testing-library/react';
+import { act, fireEvent } from '@testing-library/react';
+
 import { matchMedia } from '@shopify/jest-dom-mocks';
 
 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 />', () => {
@@ -43,13 +47,17 @@ describe('<TextField />', () => {
     const input = getByLabelText('test');
     const button = getByTestId('submit');
 
-    userEvent.type(input, str);
+    act(() => {
+      userEvent.type(input, str);
+    });
 
     expect((input as HTMLInputElement).value).toEqual(str);
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
 
-    await wait(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
     expect(onSubmit.mock.calls[0][0]).toEqual({ test: str });
   });
 
@@ -82,13 +90,21 @@ describe('<TextField />', () => {
 
     expect((input as HTMLInputElement).value).toEqual('foo,bar');
 
-    userEvent.type(input, toType);
+    act(() => {
+      fireEvent.change(input, { target: { value: '' } });
+    });
+
+    act(() => {
+      userEvent.type(input, toType);
+    });
 
     expect((input as HTMLInputElement).value).toEqual(toType);
 
-    userEvent.click(button);
+    act(() => {
+      userEvent.click(button);
+    });
 
-    await wait(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
     expect(onSubmit.mock.calls[0][0]).toEqual({ test: { hello: 0, there: 1 } });
   });
 });