Support React 17

.gitignore

@@ -5,3 +5,4 @@ dist
 es
 lib
 *.log
+.vim

package.json

@@ -67,12 +67,12 @@
     "@storybook/preset-typescript": "^1.2.0",
     "@storybook/react": "^5.2.6",
     "@stripe/stripe-js": "^1.2.0",
-    "@testing-library/jest-dom": "^5.8.0",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/jest-dom": "^5.11.8",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/react-hooks": "^4.0.0",
     "@types/jest": "^25.1.1",
-    "@types/react": "^16.9.19",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
     "@wessberg/rollup-plugin-ts": "^1.2.15",
@@ -91,9 +91,9 @@
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "jest": "^25.1.0",
     "prettier": "^1.19.1",
-    "react": "~16.9.0",
+    "react": "^17.0.1",
     "react-docgen-typescript-loader": "^3.6.0",
-    "react-dom": "~16.9.0",
+    "react-dom": "^17.0.1",
     "react-test-renderer": "16.9",
     "rimraf": "^2.6.2",
     "rollup": "^1.27.0",
@@ -108,7 +108,7 @@
   },
   "peerDependencies": {
     "@stripe/stripe-js": "^1.2.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
   }
 }

src/components/Elements.test.tsx

@@ -53,25 +53,6 @@ describe('Elements', () => {
     expect(mockStripe.elements).toHaveBeenCalledTimes(1);
   });
 
-  // TODO(christopher): support Strict Mode first
-  // eslint-disable-next-line jest/no-disabled-tests
-  test.skip('only creates elements once in Strict Mode', () => {
-    const TestComponent = () => {
-      const _ = useElements();
-      return <div />;
-    };
-
-    render(
-      <React.StrictMode>
-        <Elements stripe={mockStripe}>
-          <TestComponent />
-        </Elements>
-      </React.StrictMode>
-    );
-
-    expect(mockStripe.elements).toHaveBeenCalledTimes(1);
-  });
-
   test('injects stripe with the useStripe hook', () => {
     const wrapper = ({children}: any) => (
       <Elements stripe={mockStripe}>{children}</Elements>
@@ -99,25 +80,6 @@ describe('Elements', () => {
     );
   });
 
-  test('provides elements and stripe with the ElementsConsumer component in Strict Mode', () => {
-    expect.assertions(2);
-
-    render(
-      <React.StrictMode>
-        <Elements stripe={mockStripe}>
-          <ElementsConsumer>
-            {(ctx) => {
-              expect(ctx.elements).toBe(mockElements);
-              expect(ctx.stripe).toBe(mockStripe);
-
-              return null;
-            }}
-          </ElementsConsumer>
-        </Elements>
-      </React.StrictMode>
-    );
-  });
-
   test('provides given stripe instance on mount', () => {
     const TestComponent = () => {
       const stripe = useStripe();
@@ -225,34 +187,6 @@ describe('Elements', () => {
     expect(mockStripe.elements).toHaveBeenCalledWith({foo: 'foo'});
   });
 
-  // TODO(christopher): support Strict Mode first
-  // eslint-disable-next-line jest/no-disabled-tests
-  test.skip('does not allow updates to options after the Stripe Promise is set in StrictMode', async () => {
-    // Silence console output so test output is less noisy
-    consoleWarn.mockImplementation(() => {});
-
-    const {rerender} = render(
-      <React.StrictMode>
-        <Elements stripe={mockStripePromise} options={{foo: 'foo'} as any} />
-      </React.StrictMode>
-    );
-
-    rerender(
-      <React.StrictMode>
-        <Elements stripe={mockStripePromise} options={{bar: 'bar'} as any} />
-      </React.StrictMode>
-    );
-
-    await act(() => mockStripePromise);
-
-    expect(consoleWarn).toHaveBeenCalledTimes(1);
-    expect(consoleWarn.mock.calls[0][0]).toContain(
-      'Unsupported prop change on Elements'
-    );
-    expect(mockStripe.elements).toHaveBeenCalledTimes(1);
-    expect(mockStripe.elements).toHaveBeenCalledWith({foo: 'foo'});
-  });
-
   test('works with a Promise resolving to null for SSR safety', async () => {
     const nullPromise = Promise.resolve(null);
     const TestComponent = () => {
@@ -266,10 +200,10 @@ describe('Elements', () => {
       </Elements>
     );
 
-    expect(container).toBeEmpty();
+    expect(container).toBeEmptyDOMElement();
 
     await act(() => nullPromise.then(() => undefined));
-    expect(container).toBeEmpty();
+    expect(container).toBeEmptyDOMElement();
   });
 
   test('errors when props.stripe is `undefined`', () => {
@@ -359,15 +293,15 @@ describe('Elements', () => {
   test('throws when trying to call useElements outside of Elements context', () => {
     const {result} = renderHook(() => useElements());
 
-    expect(result.error.message).toBe(
+    expect(result.error!.message).toBe(
       'Could not find Elements context; You need to wrap the part of your app that calls useElements() in an <Elements> provider.'
     );
   });
 
   test('throws when trying to call useStripe outside of Elements context', () => {
     const {result} = renderHook(() => useStripe());
 
-    expect(result.error.message).toBe(
+    expect(result.error!.message).toBe(
       'Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an <Elements> provider.'
     );
   });

src/components/createElementComponent.tsx

@@ -114,14 +114,15 @@ const createElementComponent = (
       }
     }, [options]);
 
-    React.useEffect(
-      () => () => {
-        if (elementRef.current) {
-          elementRef.current.destroy();
+    React.useEffect(() => {
+      const element = elementRef.current;
+
+      return () => {
+        if (element) {
+          element.destroy();
         }
-      },
-      []
-    );
+      };
+    }, []);
 
     return <div id={id} className={className} ref={domNode} />;
   };