React 17 upgrade

package.json

@@ -47,8 +47,10 @@
     "watch:venia": "yarn venia run watch"
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "~7.4.4",
     "@magento/eslint-config": "~1.5.0",
     "@types/jest": "~25.2.1",
+    "babel-plugin-graphql-tag": "~2.0.0",
     "caller-id": "~0.1.0",
     "chalk": "~2.4.2",
     "chokidar": "~2.1.2",

packages/extensions/venia-adobe-data-layer/package.json

@@ -16,7 +16,7 @@
   },
   "peerDependencies": {
     "@magento/peregrine": "~8.0.0",
-    "react": "~16.9.0"
+    "react": "~17.0.1"
   },
   "pwa-studio": {
     "targets": {

packages/pagebuilder/lib/ContentTypes/Banner/__tests__/banner.spec.js

@@ -277,7 +277,9 @@ test('banner unmount causes Jarallax to be destroyed', () => {
             return parallaxElementMock;
         }
     });
-    component.unmount();
+    act(() => {
+        component.unmount();
+    });
 
     expect(mockJarallax.mock.calls[1]).toEqual([
         parallaxElementMock,

packages/pagebuilder/lib/ContentTypes/Map/__tests__/map.spec.js

@@ -4,6 +4,7 @@ import GoogleMap from '../map';
 import loadGoogleMapsApi from 'load-google-maps-api';
 import stub, { mocks } from '../__mocks__/loadGoogleMapsApi';
 import { mapDefaultProps } from '../configAggregator';
+import { act } from 'react-test-renderer';
 
 jest.mock('load-google-maps-api', () =>
     require('../__mocks__/loadGoogleMapsApi')
@@ -194,7 +195,9 @@ test('map unmount causes event listeners to be unbound', async () => {
         }
     });
 
-    component.unmount();
+    act(() => {
+        component.unmount();
+    });
 
     expect(mocks.googleMaps.event.clearInstanceListeners).toHaveBeenCalledTimes(
         2

packages/pagebuilder/lib/ContentTypes/Row/__tests__/row.spec.js

@@ -13,6 +13,7 @@ jest.mock('jarallax', () => {
     };
 });
 import { jarallax, jarallaxVideo } from 'jarallax';
+import { act } from 'react-test-renderer';
 const mockJarallax = jarallax.mockImplementation(() => {});
 const mockJarallaxVideo = jarallaxVideo.mockImplementation(() => {});
 
@@ -94,7 +95,9 @@ test('row unmount causes Jarallax to be destroyed', () => {
             return true;
         }
     });
-    component.unmount();
+    act(() => {
+        component.unmount();
+    });
 
     expect(mockJarallax.mock.calls).toEqual([
         [

packages/pagebuilder/lib/ContentTypes/Tabs/__tests__/tabs.spec.js

@@ -114,7 +114,9 @@ test('render tab and check mouse down modifies state', () => {
     expect(tabList.parent.props.className).toEqual('navigationGradientBoth');
 
     ul.removeEventListener = jest.fn().mockImplementation(() => {});
-    component.unmount();
+    act(() => {
+        component.unmount();
+    });
     expect(ul.removeEventListener).toHaveBeenCalledWith(
         'scroll',
         expect.anything()

packages/pagebuilder/package.json

@@ -37,15 +37,15 @@
     "@magento/peregrine": "~8.0.0",
     "@magento/pwa-buildpack": "~7.0.0",
     "@magento/venia-ui": "~5.0.0",
-    "@storybook/react": "~5.2.6",
+    "@storybook/react": "~6.1.14",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
     "lodash.escape": "~4.0.1",
-    "react": "~16.9.0",
-    "react-dom": "~16.9.0",
+    "react": "~17.0.1",
+    "react-dom": "~17.0.1",
     "react-slick": "~0.25.2",
     "react-tabs": "~3.0.0",
-    "react-test-renderer": "~16.9.0"
+    "react-test-renderer": "~17.0.1"
   },
   "peerDependencies": {
     "@apollo/client": "~3.1.2",
@@ -56,7 +56,7 @@
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
     "lodash.escape": "~4.0.1",
-    "react": "~16.9.0",
+    "react": "~17.0.1",
     "react-slick": "~0.25.2",
     "react-tabs": "~3.1.0"
   },

packages/peregrine/lib/talons/CartPage/GiftCards/__tests__/useGiftCards.spec.js

@@ -27,6 +27,13 @@ jest.mock('@magento/peregrine/lib/context/cart', () => {
     return { useCartContext };
 });
 
+jest.mock('informed', () => ({
+    useFormApi: jest.fn().mockReturnValue({
+        getValue: jest.fn().mockReturnValue('mock card code'),
+        reset: jest.fn()
+    })
+}));
+
 /*
  *  Member variables.
  */
@@ -121,7 +128,6 @@ test('it returns the proper shape', () => {
         isCheckingBalance: expect.any(Boolean),
         isRemovingCard: expect.any(Boolean),
         removeGiftCard: expect.any(Function),
-        setFormApi: expect.any(Function),
         shouldDisplayCardBalance: expect.any(Boolean),
         shouldDisplayCardError: expect.any(Boolean)
     });
@@ -144,17 +150,8 @@ test('returns error message with invalid request', () => {
     const component = createTestInstance(<Component {...props} />);
     let talonProps = component.root.findByProps({ id: 'giftCard' }).props;
 
-    // Mock formApi so the talon can retrieve data
-    const { setFormApi } = talonProps;
-    const formApi = {
-        setValue: jest.fn(),
-        getValue: jest.fn(),
-        reset: jest.fn()
-    };
-
     // Set the formApi and update the component so it has access to the form API
     act(() => {
-        setFormApi(formApi);
         component.update(<Component {...props} />);
     });
 
@@ -187,16 +184,9 @@ test('it runs the card balance query when checkGiftCardBalance() is called', ()
 
     let talonProps = component.root.findByProps({ id: 'giftCard' }).props;
 
-    const { setFormApi } = talonProps;
-
     const mockCardCode = 'mock card code';
-    const getValue = jest.fn(() => mockCardCode);
-    const formApi = {
-        getValue
-    };
 
     act(() => {
-        setFormApi(formApi);
         component.update(<Component {...props} />);
     });
 
@@ -212,8 +202,6 @@ test('it runs the card balance query when checkGiftCardBalance() is called', ()
 
     expect(talonProps.shouldDisplayCardBalance).toBeTruthy();
 
-    expect(getValue).toHaveBeenCalledWith('card');
-
     expect(checkCardBalance).toHaveBeenCalledWith(
         expect.objectContaining({
             variables: {

packages/peregrine/lib/talons/CartPage/GiftCards/useGiftCards.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useFormApi } from 'informed';
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
 
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
@@ -42,6 +43,8 @@ export const useGiftCards = props => {
     // We need the cartId for all of our queries and mutations.
     const [{ cartId }] = useCartContext();
 
+    const formApi = useFormApi();
+
     /*
      * Apollo hooks.
      *
@@ -66,7 +69,6 @@ export const useGiftCards = props => {
     /*
      *  useState hooks.
      */
-    const [formApi, setFormApi] = useState();
     const [mostRecentAction, setMostRecentAction] = useState(null);
 
     /*
@@ -163,7 +165,6 @@ export const useGiftCards = props => {
         isCheckingBalance: balanceResult.loading,
         isRemovingCard: removeCardLoading,
         removeGiftCard,
-        setFormApi,
         shouldDisplayCardBalance,
         shouldDisplayCardError
     };

packages/peregrine/lib/talons/CartPage/ProductListing/__tests__/useProduct.spec.js

@@ -228,7 +228,9 @@ test('it resets cart updating flag on unmount', () => {
 
     expect(setIsCartUpdating).not.toBeCalled();
 
-    tree.unmount();
+    act(() => {
+        tree.unmount();
+    });
 
     expect(setIsCartUpdating).toHaveBeenCalledWith(false);
 });

packages/peregrine/lib/talons/SearchBar/__tests__/useAutocomplete.spec.js

@@ -1,10 +1,15 @@
 import React, { useEffect } from 'react';
-import { Form, Text } from 'informed';
+import { Form, Text, useFieldState } from 'informed';
 
 import { runQuery, useLazyQuery } from '@apollo/client';
 import { useAutocomplete } from '../../../talons/SearchBar';
 import createTestInstance from '../../../util/createTestInstance';
 
+jest.mock('informed', () => ({
+    ...jest.requireActual('informed'),
+    useFieldState: jest.fn().mockReturnValue({ value: '' })
+}));
+
 jest.mock('@apollo/client', () => {
     const runQuery = jest.fn();
     const queryResult = {
@@ -154,6 +159,10 @@ test('renders a summary message', () => {
 });
 
 test('renders a message invalid character length', () => {
+    useFieldState.mockReturnValueOnce({
+        value: 'MOCK_VALUE'
+    });
+
     createTestInstance(
         <Form>
             <Text field="search_query" initialValue="a" />

packages/peregrine/package.json

@@ -23,22 +23,22 @@
     "@magento/eslint-config": "~1.5.0",
     "intl": "~1.2.5",
     "intl-locales-supported": "~1.8.12",
-    "react": "~16.9.0",
-    "react-dom": "~16.9.0",
+    "react": "~17.0.1",
+    "react-dom": "~17.0.1",
     "react-intl": "~5.7.0",
     "react-redux": "~7.1.1",
     "react-router-dom": "~5.1.0",
-    "react-test-renderer": "~16.9.0",
+    "react-test-renderer": "~17.0.1",
     "redux": "~4.0.4",
     "redux-actions": "~2.6.5",
     "wait-for-expect": "~1.2.0"
   },
   "peerDependencies": {
     "@apollo/client": "~3.1.2",
     "@babel/runtime": "~7.4.2",
-    "informed": "~2.11.17",
-    "react": "~16.9.0",
-    "react-dom": "~16.9.0",
+    "informed": "~3.27.0",
+    "react": "~17.0.1",
+    "react-dom": "~17.0.1",
     "react-intl": "~5.7.0",
     "react-redux": "~7.1.1",
     "react-router-dom": "~5.1.0",

packages/pwa-buildpack/lib/WebpackTools/targetables/__tests__/__snapshots__/TargetableReactComponent.spec.js.snap

@@ -301,25 +301,58 @@ function Checkbox(props) {
     value: checked
   } = fieldState;
   const icon = checked ? checkedIcon : uncheckedIcon;
-  return React.createElement(Fragment, null, React.createElement(\\"fieldset\\", null, React.createElement(\\"label\\", {
-    className: classes.root
-  }, React.createElement(BasicCheckbox, _extends({}, rest, {
-    className: classes.input,
-    key: NUMBER
-  })), React.createElement(\\"span\\", {
-    className: \\"literal-classname\\" + \\" \\" + classes.icon
-  }, icon, React.createElement(React.Fragment, null, React.createElement(DynamicBlerg$1, null), React.createElement(DynamicBlerg$1, null), React.createElement(DynamicBlerg$2, null), React.createElement(DynamicComponent$3, null))), React.createElement(\\"span\\", {
-    className: classes.label + \\" \\" + (\\"another-literal\\" + \\"-classname\\")
-  }, label))), React.createElement(Status, {
-    className: \\"status-class\\"
-  }), React.createElement(EricB, {
-    and: and
-  }), React.createElement(Message, {
-    fieldState: fieldState,
-    className: \\"wildin\\"
-  }, message), React.createElement(Rakim, null), React.createElement(Message, {
-    fieldState: fieldState,
-    className: \\"wildin\\"
-  }, \\"hey cool\\"));
+  return (
+    /*#__PURE__*/
+    React.createElement(Fragment, null,
+    /*#__PURE__*/
+    React.createElement(\\"fieldset\\", null,
+    /*#__PURE__*/
+    React.createElement(\\"label\\", {
+      className: classes.root
+    },
+    /*#__PURE__*/
+    React.createElement(BasicCheckbox, _extends({}, rest, {
+      className: classes.input,
+      key: NUMBER
+    })),
+    /*#__PURE__*/
+    React.createElement(\\"span\\", {
+      className: \\"literal-classname\\" + \\" \\" + classes.icon
+    }, icon,
+    /*#__PURE__*/
+    React.createElement(React.Fragment, null,
+    /*#__PURE__*/
+    React.createElement(DynamicBlerg$1, null),
+    /*#__PURE__*/
+    React.createElement(DynamicBlerg$1, null),
+    /*#__PURE__*/
+    React.createElement(DynamicBlerg$2, null),
+    /*#__PURE__*/
+    React.createElement(DynamicComponent$3, null))),
+    /*#__PURE__*/
+    React.createElement(\\"span\\", {
+      className: classes.label + \\" \\" + (\\"another-literal\\" + \\"-classname\\")
+    }, label))),
+    /*#__PURE__*/
+    React.createElement(Status, {
+      className: \\"status-class\\"
+    }),
+    /*#__PURE__*/
+    React.createElement(EricB, {
+      and: and
+    }),
+    /*#__PURE__*/
+    React.createElement(Message, {
+      fieldState: fieldState,
+      className: \\"wildin\\"
+    }, message),
+    /*#__PURE__*/
+    React.createElement(Rakim, null),
+    /*#__PURE__*/
+    React.createElement(Message, {
+      fieldState: fieldState,
+      className: \\"wildin\\"
+    }, \\"hey cool\\"))
+  );
 }"
 `;