WithContactDetailsValidation Unit Test: pass Redux store as wrappingC…

…omponent, use full mount

React Redux 7.x no longer supports `store` prop for `Provider`, and uses the new `React.createContext()`
instead of the legacy context. That requires an update of the unit tests.

- use `wrappingComponent` option to activate a mock Redux provider
- switch to full mount, as `wrappingComponent` doesn't work with `useContext` in Enzyme (enzymejs/enzyme#2176)

client/components/domains/registrant-extra-info/test/with-contact-details-validation.js

@@ -1,29 +1,36 @@
-/** @format */
+/**
+ * @jest-environment jsdom
+ */
+
 /**
  * External dependencies
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { Provider } from 'react-redux';
+import { mount } from 'enzyme';
 import { difference, identity, set } from 'lodash';
 
 /**
  * Internal dependencies
  */
-import { ValidatedRegistrantExtraInfoUkForm } from '../uk-form';
+import { ValidatedRegistrantExtraInfoUkForm, RegistrantExtraInfoUkForm } from '../uk-form';
 
 jest.mock( 'state/selectors/get-validation-schemas', () => () => ( {
 	uk: require( './uk-schema.json' ),
 } ) );
 
+const mockStore = {
+	getState: () => ( {} ),
+	subscribe: () => () => {},
+	dispatch: () => {},
+};
+
+const MockReduxProvider = ( { children } ) => <Provider store={ mockStore }>{ children }</Provider>;
+
 const mockProps = {
 	translate: identity,
 	updateContactDetailsCache: identity,
 	tld: 'uk',
-	store: {
-		getState: () => {},
-		subscribe: () => {},
-		dispatch: () => {},
-	},
 };
 
 describe( 'uk-form validation', () => {
@@ -76,13 +83,14 @@ describe( 'uk-form validation', () => {
 			};
 
 			needsRegistrationNumber.forEach( registrantType => {
-				const wrapper = shallow(
+				const wrapper = mount(
 					<ValidatedRegistrantExtraInfoUkForm
 						{ ...mockProps }
 						contactDetails={ set( testContactDetails, 'extra.uk.registrantType', registrantType ) }
 						ccTldDetails={ { registrantType } }
-					/>
-				).dive();
+					/>,
+					{ wrappingComponent: MockReduxProvider }
+				).find( RegistrantExtraInfoUkForm );
 
 				expect( wrapper.props() ).toMatchObject( {
 					validationErrors: {
@@ -109,13 +117,14 @@ describe( 'uk-form validation', () => {
 			};
 
 			difference( allRegistrantTypes, needsRegistrationNumber ).forEach( registrantType => {
-				const wrapper = shallow(
+				const wrapper = mount(
 					<ValidatedRegistrantExtraInfoUkForm
 						{ ...mockProps }
 						contactDetails={ set( testContactDetails, 'extra.uk.registrantType', registrantType ) }
 						ccTldDetails={ { registrantType } }
-					/>
-				).dive();
+					/>,
+					{ wrappingComponent: MockReduxProvider }
+				).find( RegistrantExtraInfoUkForm );
 
 				expect( wrapper.props() ).toHaveProperty( 'validationErrors', {} );
 			} );
@@ -134,7 +143,7 @@ describe( 'uk-form validation', () => {
 			const badFormats = [ '124', 'OC38599', '066566879', 'OCABCDEF', '054025OC' ];
 
 			badFormats.forEach( registrationNumber => {
-				const wrapper = shallow(
+				const wrapper = mount(
 					<ValidatedRegistrantExtraInfoUkForm
 						{ ...mockProps }
 						contactDetails={ set(
@@ -143,8 +152,9 @@ describe( 'uk-form validation', () => {
 							registrationNumber
 						) }
 						ccTldDetails={ { registrationNumber } }
-					/>
-				).dive();
+					/>,
+					{ wrappingComponent: MockReduxProvider }
+				).find( RegistrantExtraInfoUkForm );
 
 				expect( wrapper.props() ).toHaveProperty( 'validationErrors.extra.uk.registrationNumber' );
 			} );
@@ -164,13 +174,14 @@ describe( 'uk-form validation', () => {
 			};
 
 			needsTradingName.forEach( registrantType => {
-				const wrapper = shallow(
+				const wrapper = mount(
 					<ValidatedRegistrantExtraInfoUkForm
 						{ ...mockProps }
 						contactDetails={ set( testContactDetails, 'extra.uk.registrantType', registrantType ) }
 						ccTldDetails={ { registrantType } }
-					/>
-				).dive();
+					/>,
+					{ wrappingComponent: MockReduxProvider }
+				).find( RegistrantExtraInfoUkForm );
 
 				expect( wrapper.props() ).toMatchObject( {
 					validationErrors: {
@@ -198,13 +209,14 @@ describe( 'uk-form validation', () => {
 					},
 				};
 
-				const wrapper = shallow(
+				const wrapper = mount(
 					<ValidatedRegistrantExtraInfoUkForm
 						{ ...mockProps }
 						contactDetails={ testContactDetails }
 						ccTldDetails={ testContactDetails.extra.uk }
-					/>
-				).dive();
+					/>,
+					{ wrappingComponent: MockReduxProvider }
+				).find( RegistrantExtraInfoUkForm );
 
 				expect( wrapper.props() ).toHaveProperty( 'validationErrors', {} );
 			} );