Support formik v2 and polaris v4

SatelCreative · Nov 6, 2019 · 4c39604 · 4c39604
1 parent 82db04e
commit 4c39604
Show file tree

Hide file tree

Showing 6 changed files with 989 additions and 1,678 deletions.
diff --git a/package.json b/package.json
@@ -45,23 +45,24 @@
     "react": ">=16"
   },
   "devDependencies": {
-    "@satel/eslint-config-ts-react": "2.0.2",
-    "@shopify/polaris": "3.21.1",
-    "@testing-library/dom": "6.1.0",
-    "@testing-library/react": "9.1.3",
-    "@testing-library/user-event": "6.0.0",
-    "@types/jest": "24.0.18",
-    "@types/react": "16.9.2",
-    "@types/react-dom": "16.9.0",
-    "auto-changelog": "1.15.0",
-    "env-cmd": "9.0.3",
-    "eslint": "6.2.2",
-    "formik": "1.5.8",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "release-it": "12.3.5",
-    "tsdx": "0.9.0",
+    "@satel/eslint-config-ts-react": "3.0.0",
+    "@shopify/jest-dom-mocks": "2.8.5",
+    "@shopify/polaris": "4.7.3",
+    "@testing-library/dom": "6.10.0",
+    "@testing-library/react": "9.3.2",
+    "@testing-library/user-event": "7.1.2",
+    "@types/jest": "24.0.22",
+    "@types/react": "16.9.11",
+    "@types/react-dom": "16.9.3",
+    "auto-changelog": "1.16.2",
+    "env-cmd": "10.0.1",
+    "eslint": "6.6.0",
+    "formik": "2.0.3",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "release-it": "12.4.3",
+    "tsdx": "0.11.0",
     "tslib": "1.10.0",
-    "typescript": "3.5.3"
+    "typescript": "3.7.2"
   }
 }
diff --git a/test/Checkbox.test.tsx b/test/Checkbox.test.tsx
@@ -1,7 +1,7 @@
 /* eslint-env jest */
-/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
 import React, { ReactNode } from 'react';
-import { Formik, FormikActions, Form } from 'formik';
+import { Formik, FormikHelpers, Form } from 'formik';
+import { matchMedia } from '@shopify/jest-dom-mocks';
 import { render, cleanup } from './test-utils';
 import { Checkbox } from '../src';
 
@@ -10,7 +10,7 @@ afterEach(cleanup);
 interface BasicFormProps<V = any> {
   children: ReactNode;
   initialValues?: V;
-  onSubmit?: (values: V, formikActions: FormikActions<V>) => void;
+  onSubmit?: (values: V, formikHelpers: FormikHelpers<V>) => void;
   formRef?: any;
 }
 
@@ -21,17 +21,24 @@ function BasicForm<V = any>(props: BasicFormProps<V>) {
       throw new Error('Submit not handled');
     },
     children,
-    formRef,
   }: BasicFormProps<V> = props;
 
   return (
-    <Formik<V> initialValues={initialValues} onSubmit={onSubmit} ref={formRef}>
+    <Formik<V> initialValues={initialValues} onSubmit={onSubmit}>
       {() => <Form>{children}</Form>}
     </Formik>
   );
 }
 
 describe('<Checkbox />', () => {
+  beforeEach(() => {
+    matchMedia.mock();
+  });
+
+  afterEach(() => {
+    matchMedia.restore();
+  });
+
   it('renders without crashing', async () => {
     const { getByLabelText } = render(
       <BasicForm>

diff --git a/test/TextField.test.tsx b/test/TextField.test.tsx
@@ -1,9 +1,10 @@
 /* eslint-env jest */
-/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
 import React, { ReactNode } from 'react';
-import { Formik, FormikActions, Form } from 'formik';
+import { Formik, FormikHelpers, Form } from 'formik';
 import userEvent from '@testing-library/user-event';
 import { wait } from '@testing-library/react';
+import { matchMedia } from '@shopify/jest-dom-mocks';
+
 import { render, cleanup } from './test-utils';
 import { TextField } from '../src';
 
@@ -12,7 +13,7 @@ afterEach(cleanup);
 interface BasicFormProps<V = any> {
   children: ReactNode;
   initialValues?: V;
-  onSubmit?: (values: V, formikActions: FormikActions<V>) => void;
+  onSubmit?: (values: V, formikHelpers: FormikHelpers<V>) => void;
   formRef?: any;
 }
 
@@ -23,17 +24,24 @@ function BasicForm<V = any>(props: BasicFormProps<V>) {
       throw new Error('Submit not handled');
     },
     children,
-    formRef,
   }: BasicFormProps<V> = props;
 
   return (
-    <Formik<V> initialValues={initialValues} onSubmit={onSubmit} ref={formRef}>
+    <Formik<V> initialValues={initialValues} onSubmit={onSubmit}>
       {() => <Form>{children}</Form>}
     </Formik>
   );
 }
 
 describe('<TextField />', () => {
+  beforeEach(() => {
+    matchMedia.mock();
+  });
+
+  afterEach(() => {
+    matchMedia.restore();
+  });
+
   it('renders without crashing', async () => {
     const { getByLabelText } = render(
       <BasicForm>

diff --git a/test/test-utils.tsx b/test/test-utils.tsx
@@ -3,7 +3,7 @@ import { render, RenderOptions } from '@testing-library/react';
 import { AppProvider } from '@shopify/polaris';
 
 const Provider = ({ children }: { children: ReactNode }) => {
-  return <AppProvider>{children}</AppProvider>;
+  return <AppProvider i18n={{}}>{children}</AppProvider>;
 };
 
 const customRender = (

diff --git a/tsconfig.json b/tsconfig.json
@@ -18,11 +18,12 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
     "baseUrl": "./",
     "paths": {
       "*": ["src/*", "node_modules/*"]
     },
-    "jsx": "react",
-    "esModuleInterop": true
   }
 }