Replace use of deprecated lifecycle method componentWillReceiveProps

demo/demo/index.js

@@ -166,16 +166,6 @@ class _PaymentRequestForm extends React.Component<
       },
     });
 
-    paymentRequest.on('token', ({complete, token, ...data}) => {
-      console.log('Received Stripe token: ', token);
-      console.log('Received customer information: ', data);
-      complete('success');
-    });
-
-    paymentRequest.canMakePayment().then((result) => {
-      this.setState({canMakePayment: !!result});
-    });
-
     this.state = {
       canMakePayment: false,
       paymentRequest,
@@ -187,6 +177,18 @@ class _PaymentRequestForm extends React.Component<
     paymentRequest: Object,
   };
 
+  componentDidMount() {
+    this.state.paymentRequest.on('token', ({complete, token, ...data}) => {
+      console.log('Received Stripe token: ', token);
+      console.log('Received customer information: ', data);
+      complete('success');
+    });
+
+    this.state.paymentRequest.canMakePayment().then((result) => {
+      this.setState({canMakePayment: !!result});
+    });
+  }
+
   render() {
     return this.state.canMakePayment ? (
       <PaymentRequestButtonElement

package.json

@@ -50,7 +50,8 @@
     "babel-preset-react": "^6.24.1",
     "cross-env": "^5.0.5",
     "doctoc": "^1.3.0",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-15": "^1.1.1",
     "eslint": "^4.6.1",
     "eslint-config-prettier": "2.9.0",
     "eslint-config-stripe": "^1.0.13",
@@ -74,5 +75,8 @@
   "peerDependencies": {
     "react": "^15.5.4 || ^16.0.0-0",
     "react-dom": "^15.5.4 || ^16.0.0-0"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
   }
 }

src/components/Element.js

@@ -81,8 +81,8 @@ const Element = (
       });
     }
 
-    componentWillReceiveProps(nextProps: Props) {
-      const options = _extractOptions(nextProps);
+    componentDidUpdate() {
+      const options = _extractOptions(this.props);
       if (
         Object.keys(options).length !== 0 &&
         !isEqual(options, this._options)

src/components/Elements.test.js

@@ -32,7 +32,7 @@ describe('Elements', () => {
       </Elements>,
       {context: syncContext}
     );
-    const childContext = wrapper.node.getChildContext();
+    const childContext = wrapper.instance().getChildContext();
     expect(Object.keys(childContext)).toEqual([
       'addElementsLoadListener',
       'registerElement',
@@ -52,7 +52,7 @@ describe('Elements', () => {
       </Elements>,
       {context: syncContext}
     );
-    const childContext = wrapper.node.getChildContext();
+    const childContext = wrapper.instance().getChildContext();
 
     const mockCallback = jest.fn();
     childContext.addElementsLoadListener(mockCallback);
@@ -76,7 +76,7 @@ describe('Elements', () => {
       </Elements>,
       {context: asyncContext}
     );
-    const childContext = wrapper.node.getChildContext();
+    const childContext = wrapper.instance().getChildContext();
 
     const a = new Promise((resolve) =>
       childContext.addElementsLoadListener((first) => {

src/components/PaymentRequestButtonElement.js

@@ -83,13 +83,13 @@ class PaymentRequestButtonElement extends React.Component<Props> {
       this._element.mount(this._ref);
     });
   }
-  componentWillReceiveProps(nextProps: Props) {
-    if (this.props.paymentRequest !== nextProps.paymentRequest) {
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.paymentRequest !== prevProps.paymentRequest) {
       console.warn(
         'Unsupported prop change: paymentRequest is not a customizable property.'
       );
     }
-    const options = _extractOptions(nextProps);
+    const options = _extractOptions(this.props);
     if (
       Object.keys(options).length !== 0 &&
       !shallowEqual(options, this._options)

src/components/Provider.js

@@ -143,16 +143,16 @@ export default class Provider extends React.Component<Props> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentDidUpdate(prevProps: Props) {
     const apiKeyChanged =
       this.props.apiKey &&
-      nextProps.apiKey &&
-      this.props.apiKey !== nextProps.apiKey;
+      prevProps.apiKey &&
+      this.props.apiKey !== prevProps.apiKey;
 
     const stripeInstanceChanged =
       this.props.stripe &&
-      nextProps.stripe &&
-      this.props.stripe !== nextProps.stripe;
+      prevProps.stripe &&
+      this.props.stripe !== prevProps.stripe;
     if (
       !this._didWarn &&
       (apiKeyChanged || stripeInstanceChanged) &&
@@ -167,10 +167,10 @@ export default class Provider extends React.Component<Props> {
       return;
     }
 
-    if (!this._didWakeUpListeners && nextProps.stripe) {
+    if (!this._didWakeUpListeners && this.props.stripe) {
       // Wake up the listeners if we've finally been given a StripeShape
       this._didWakeUpListeners = true;
-      const stripe = ensureStripeShape(nextProps.stripe);
+      const stripe = ensureStripeShape(this.props.stripe);
       this._meta.stripe = stripe;
       this._listeners.forEach((fn) => {
         fn(stripe);

src/components/Provider.test.js

@@ -102,7 +102,7 @@ describe('StripeProvider', () => {
         <form />
       </StripeProvider>
     );
-    const childContext = wrapper.node.getChildContext();
+    const childContext = wrapper.instance().getChildContext();
     expect(childContext).toEqual({stripe: stripeMockResult, tag: 'sync'});
   });
 
@@ -112,7 +112,7 @@ describe('StripeProvider', () => {
         <form />
       </StripeProvider>
     );
-    const childContext = wrapper.node.getChildContext();
+    const childContext = wrapper.instance().getChildContext();
     expect(childContext).toEqual({stripe: stripeMockResult, tag: 'sync'});
   });
 
@@ -122,7 +122,7 @@ describe('StripeProvider', () => {
         <form />
       </StripeProvider>
     );
-    const childContext = wrapper.node.getChildContext();
+    const childContext = wrapper.instance().getChildContext();
     expect(childContext).toHaveProperty('addStripeLoadListener');
     expect(childContext).toHaveProperty('tag', 'async');
   });
@@ -134,7 +134,7 @@ describe('StripeProvider', () => {
       </StripeProvider>
     );
 
-    const childContext = wrapper.node.getChildContext();
+    const childContext = wrapper.instance().getChildContext();
     childContext.addStripeLoadListener((stripe) => {
       expect(stripe).toEqual(stripeMockResult);
       done();
@@ -152,7 +152,7 @@ describe('StripeProvider', () => {
         <form />
       </StripeProvider>
     );
-    let childContext = wrapper.node.getChildContext();
+    let childContext = wrapper.instance().getChildContext();
     const keyOneInstance = childContext.stripe;
     expect(keyOneInstance).toBeTruthy();
 
@@ -162,7 +162,7 @@ describe('StripeProvider', () => {
         <form />
       </StripeProvider>
     );
-    childContext = wrapper.node.getChildContext();
+    childContext = wrapper.instance().getChildContext();
     expect(childContext.stripe).toBe(keyOneInstance);
 
     // Create another, but with a different key!
@@ -171,7 +171,7 @@ describe('StripeProvider', () => {
         <form />
       </StripeProvider>
     );
-    childContext = wrapper.node.getChildContext();
+    childContext = wrapper.instance().getChildContext();
     expect(childContext.stripe).not.toBe(keyOneInstance);
   });
 

src/components/inject.test.js

@@ -267,7 +267,7 @@ describe('injectStripe()', () => {
         context,
       });
 
-      expect(() => wrapper.node.getWrappedInstance()).toThrow(
+      expect(() => wrapper.instance().getWrappedInstance()).toThrow(
         'To access the wrapped instance, the `{withRef: true}` option must be set when calling `injectStripe()`'
       );
     });
@@ -289,7 +289,7 @@ describe('injectStripe()', () => {
       });
 
       expect(
-        wrapper.node.getWrappedInstance() instanceof WrappedClassComponent
+        wrapper.instance().getWrappedInstance() instanceof WrappedClassComponent
       ).toBe(true);
     });
   });

src/setupTests.js

@@ -0,0 +1,5 @@
+// @noflow
+import {configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
+
+configure({adapter: new Adapter()});