WebPaymentBox unit test: pass mock Redux store by wrappingComponent e…

…nzyme option

Instead of using the legacy React context, which is an implementation detail of particular
React Redux version, use the Enzyme's `wrappingComponent` option to render a mock Redux
provider above the tested component.

client/components/payment-country-select/index.jsx

@@ -32,7 +32,7 @@ export class PaymentCountrySelect extends Component {
 		updateCartStore: setTaxCountryCode,
 	};
 
-	componentDidMount = () => {
+	componentDidMount() {
 		// Notify the callback function about the country (or lack thereof)
 		// that is pre-selected at the time the component is first displayed
 		if ( this.props.countriesList.length ) {
@@ -42,7 +42,7 @@ export class PaymentCountrySelect extends Component {
 			);
 			this.props.onCountrySelected( this.props.name, validCountryCode );
 		}
-	};
+	}
 
 	componentDidUpdate( prevProps ) {
 		// There's a chance on first mount that 'countriesList' isn't filled yet

client/my-sites/checkout/checkout/test/web-payment-box.js

@@ -1,15 +1,18 @@
 /**
- * @format
  * @jest-environment jsdom
  */
 
 /**
  * External dependencies
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { Provider } from 'react-redux';
+import { shallow, mount } from 'enzyme';
 import { identity } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
 import { WebPaymentBox } from '../web-payment-box';
 import { BEFORE_SUBMIT } from 'lib/store-transactions/step-types';
 import PaymentCountrySelect from 'components/payment-country-select';
@@ -31,6 +34,10 @@ jest.mock( 'lib/cart-values', () => ( {
 	},
 } ) );
 
+// Mock some Redux-connected non-essential components to be empty
+jest.mock( 'my-sites/checkout/checkout/recent-renewals', () => () => null );
+jest.mock( 'my-sites/checkout/checkout/checkout-terms', () => () => null );
+
 window.ApplePaySession = { canMakePayments: () => true };
 window.PaymentRequest = true;
 
@@ -56,47 +63,48 @@ describe( 'WebPaymentBox', () => {
 		transaction: {},
 	};
 
-	const context = {
-		// mock Redux store to keep connect() calls happy
-		store: {
-			subscribe: jest.fn(),
-			dispatch: jest.fn(),
-			getState: jest.fn(),
-		},
+	// mock Redux store to keep connect() calls happy
+	const store = {
+		subscribe: () => () => {},
+		dispatch: () => {},
+		getState: () => ( {} ),
 	};
 
+	const ReduxProvider = ( { children } ) => <Provider store={ store }>{ children }</Provider>;
+
 	test( 'should render', () => {
 		shallow( <WebPaymentBox { ...defaultProps } /> );
 	} );
 
 	describe( 'Cart Store Integration', () => {
 		describe( 'Country Code', () => {
-			const countrySelectWrapper = () =>
-				shallow( <WebPaymentBox { ...defaultProps } />, { context } ).find( PaymentCountrySelect );
+			const countrySelectWrapper = () => {
+				const wrapper = mount( <WebPaymentBox { ...defaultProps } />, {
+					wrappingComponent: ReduxProvider,
+				} );
+				return wrapper.find( PaymentCountrySelect );
+			};
 
 			test( 'Should render value from the cart store', () => {
-				expect(
-					countrySelectWrapper()
-						.find( PaymentCountrySelect )
-						.prop( 'value' )
-				).toEqual( 'TEST_CART_COUNTRY_CODE' );
+				expect( countrySelectWrapper().prop( 'value' ) ).toEqual( 'TEST_CART_COUNTRY_CODE' );
 			} );
 
 			test( 'Should update the store when changed', () => {
 				countrySelectWrapper()
-					.dive() // unwrap Connect Call
-					.dive() // Activate underlying CountrySelect behaviour.
+					.find( 'select' )
 					.simulate( 'change', { target: { value: 'TEST' } } );
 
 				expect( setTaxCountryCode ).toHaveBeenCalledWith( 'TEST' );
 			} );
 		} );
 
 		describe( 'Postal Code', () => {
-			const postalCodeInputWrapper = () =>
-				shallow( <WebPaymentBox { ...defaultProps } />, { context } ).findWhere(
-					n => n.prop( 'name' ) === 'postal-code'
-				);
+			const postalCodeInputWrapper = () => {
+				const wrapper = mount( <WebPaymentBox { ...defaultProps } />, {
+					wrappingComponent: ReduxProvider,
+				} );
+				return wrapper.findWhere( n => n.type() === 'input' && n.prop( 'name' ) === 'postal-code' );
+			};
 
 			test( 'Should render value from the cart store', () => {
 				expect( postalCodeInputWrapper().prop( 'value' ) ).toEqual( 'TEST_CART_POSTAL_CODE' );

client/my-sites/checkout/checkout/web-payment-box.jsx

@@ -389,8 +389,9 @@ export class WebPaymentBox extends React.Component {
 		// https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/show),
 		// so we can't delay the opening of the payment sheet on waiting for
 		// the response to this API call.
-		wpcom.undocumented().paygateConfiguration(
-			{
+		wpcom
+			.undocumented()
+			.paygateConfiguration( {
 				request_type: 'new_purchase',
 				country: selectedCountryCode,
 				// The endpoint also accepts an optional credit card brand in
@@ -401,15 +402,14 @@ export class WebPaymentBox extends React.Component {
 				// is open, but we need to send Apple Pay the processor country
 				// in order to open the payment sheet). Fortunately, in most
 				// cases this won't have a practical effect.
-			},
-			function( configError, configuration ) {
+			} )
+			.then( configuration => {
 				let processorCountry = 'US';
-				if ( ! configError && configuration.processor === 'stripe_ie' ) {
+				if ( configuration.processor === 'stripe_ie' ) {
 					processorCountry = 'IE';
 				}
 				this.setState( { processorCountry } );
-			}.bind( this )
-		);
+			} );
 	};
 
 	/**