Run CI on node 18, and use it locally (#2639)

* Run CI on node 18, and use it locally Add resolution for `@apollo/federation` as it refuses to install on node18, but we never use code from this transitive dependency * fix storybook tests * translation test fixes
Shopify · May 1, 2023 · a2f8b0e · a2f8b0e
1 parent db05ac6
commit a2f8b0e
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 54 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -9,5 +9,6 @@ packages/*/build
 **/*.mjs
 **/tests/fixtures/**/default-types/*.ts
 
-# Don't lint storybook-a11y-fixtures
+# Don't lint fixtures
 packages/storybook-a11y-test/tests/fixtures/storybook
+packages/graphql-typescript-definitions/tests/fixtures/**/*.graphql.d.ts
diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
@@ -21,10 +21,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup Node with v16.13.0
+      - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.13.0
+          node-version: 18.x
 
       - name: Check for Changeset
         run: npx @changesets/cli status --since="origin/main"
diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
@@ -19,7 +19,7 @@ jobs:
         # or failure will fall back to the previous behavior of downloading
         # directly from node dist.
         # https://github.com/actions/setup-node
-        node-version: ['14', '16']
+        node-version: ['14', '16', '18']
         react-version: ['17', '18']
     timeout-minutes: 15
 

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'yarn'
 
       - name: Install dependencies

diff --git a/.github/workflows/snapit.yml b/.github/workflows/snapit.yml
@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Install dependencies
         run: yarn --frozen-lockfile

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.15.0
+v18.16.0
diff --git a/dev.yml b/dev.yml
@@ -2,7 +2,7 @@ name: quilt
 type: node
 up:
   - node:
-      version: v16.15.0
+      version: v18.16.0
       yarn: v1.22.15
 commands:
   __default__: start

diff --git a/package.json b/package.json
@@ -83,5 +83,8 @@
     "rollup-plugin-node-externals": "^2.2.0",
     "typescript": "~5.0.2",
     "yalc": "^1.0.0-pre.50"
+  },
+  "resolutions": {
+    "@apollo/federation": "0.38.1"
   }
 }
diff --git a/packages/react-i18n/src/tests/i18n.test.ts b/packages/react-i18n/src/tests/i18n.test.ts
@@ -31,6 +31,8 @@ const getCurrencySymbolMock: jest.Mock =
   require('../utilities').getCurrencySymbol;
 /* eslint-enable @typescript-eslint/no-var-requires */
 
+const isModernNode = process.version.startsWith('v18');
+
 describe('I18n', () => {
   const defaultDetails = {locale: 'en-ca'};
   const defaultTranslations = [{hello: 'Hello, {name}!'}];
@@ -879,6 +881,7 @@ describe('I18n', () => {
   });
 
   describe('#formatCurrency() form:auto', () => {
+    /* eslint-disable jest/no-if */
     it.each`
       locale     | currency | expected
       ${'cs-CZ'} | ${'CZK'} | ${'1 234,56 Kč CZK'}
@@ -898,8 +901,8 @@ describe('I18n', () => {
       ${'fr-FR'} | ${'OMR'} | ${'1 234,560 OMR'}
       ${'fr-FR'} | ${'USD'} | ${'1 234,56 $ USD'}
       ${'fr-FR'} | ${'CAD'} | ${'1 234,56 $'}
-      ${'ar-EG'} | ${'CAD'} | ${'$ 1,234.56'}
-      ${'ar-EG'} | ${'USD'} | ${'$ 1,234.56 USD'}
+      ${'ar-EG'} | ${'CAD'} | ${isModernNode ? '1,234.56 $' : '$ 1,234.56'}
+      ${'ar-EG'} | ${'USD'} | ${isModernNode ? '1,234.56 $ USD' : '$ 1,234.56 USD'}
       ${'he-IL'} | ${'USD'} | ${'1,234.56 $ USD'}
     `(
       'formats 1234.56 of $currency in $locale to expected $expected',
@@ -914,9 +917,11 @@ describe('I18n', () => {
         expect(sanitizeSpaces(result)).toBe(expected);
       },
     );
+    /* eslint-enable jest/no-if */
   });
 
   describe('#formatCurrency() form:explicit', () => {
+    /* eslint-disable jest/no-if */
     it.each`
       locale     | currency | expected
       ${'cs-CZ'} | ${'CZK'} | ${'1 234,56 Kč CZK'}
@@ -933,7 +938,7 @@ describe('I18n', () => {
       ${'fr-FR'} | ${'JPY'} | ${'1 235 ¥ JPY'}
       ${'fr-FR'} | ${'OMR'} | ${'1 234,560 OMR'}
       ${'fr-FR'} | ${'USD'} | ${'1 234,56 $ USD'}
-      ${'ar-EG'} | ${'USD'} | ${'$ 1,234.56 USD'}
+      ${'ar-EG'} | ${'USD'} | ${isModernNode ? '1,234.56 $ USD' : '$ 1,234.56 USD'}
       ${'he-IL'} | ${'USD'} | ${'1,234.56 $ USD'}
     `(
       'formats 1234.56 of $currency in $locale to expected $expected',
@@ -948,9 +953,11 @@ describe('I18n', () => {
         expect(sanitizeSpaces(result)).toBe(expected);
       },
     );
+    /* eslint-enable jest/no-if */
   });
 
   describe('#formatCurrency() form:explicit with negative amount', () => {
+    /* eslint-disable jest/no-if */
     it.each`
       locale     | currency | expected
       ${'cs-CZ'} | ${'CZK'} | ${'-1 234,56 Kč CZK'}
@@ -967,7 +974,7 @@ describe('I18n', () => {
       ${'fr-FR'} | ${'JPY'} | ${'-1 235 ¥ JPY'}
       ${'fr-FR'} | ${'OMR'} | ${'-1 234,560 OMR'}
       ${'fr-FR'} | ${'USD'} | ${'-1 234,56 $ USD'}
-      ${'ar-EG'} | ${'USD'} | ${'\u200E-$ 1,234.56 USD'}
+      ${'ar-EG'} | ${'USD'} | ${isModernNode ? '\u200E-1,234.56 $ USD' : '\u200E-$ 1,234.56 USD'}
       ${'he-IL'} | ${'USD'} | ${'\u200E-1,234.56 $ USD'}
     `(
       'formats -1234.56 of $currency in $locale to expected $expected',
@@ -982,6 +989,7 @@ describe('I18n', () => {
         expect(sanitizeSpaces(result)).toBe(expected);
       },
     );
+    /* eslint-enable jest/no-if */
   });
 
   describe('#formatCurrency() form:none', () => {
@@ -1049,6 +1057,7 @@ describe('I18n', () => {
   });
 
   describe('#formatCurrency() form:short', () => {
+    /* eslint-disable jest/no-if */
     it.each`
       locale     | currency | expected
       ${'cs-CZ'} | ${'CZK'} | ${'1 234,56 Kč'}
@@ -1069,7 +1078,7 @@ describe('I18n', () => {
       ${'sv-SE'} | ${'USD'} | ${'1 234,56 $'}
       ${'en-US'} | ${'SGD'} | ${'$1,234.56'}
       ${'fr-FR'} | ${'SGD'} | ${'1 234,56 $'}
-      ${'ar-EG'} | ${'USD'} | ${'$ 1,234.56'}
+      ${'ar-EG'} | ${'USD'} | ${isModernNode ? '1,234.56 $' : '$ 1,234.56'}
     `(
       'formats 1234.56 of $currency in $locale to expected $expected',
       ({locale, currency, expected}) => {
@@ -1080,9 +1089,11 @@ describe('I18n', () => {
         expect(sanitizeSpaces(result)).toBe(expected);
       },
     );
+    /* eslint-enable jest/no-if */
   });
 
   describe('#formatCurrency() form:short with negative amount', () => {
+    /* eslint-disable jest/no-if */
     it.each`
       locale     | currency | expected
       ${'cs-CZ'} | ${'CZK'} | ${'-1 234,56 Kč'}
@@ -1101,7 +1112,7 @@ describe('I18n', () => {
       ${'sv-SE'} | ${'USD'} | ${'\u22121 234,56 $'}
       ${'en-US'} | ${'SGD'} | ${'-$1,234.56'}
       ${'fr-FR'} | ${'SGD'} | ${'-1 234,56 $'}
-      ${'ar-EG'} | ${'USD'} | ${'\u200E-$ 1,234.56'}
+      ${'ar-EG'} | ${'USD'} | ${isModernNode ? '\u200E-1,234.56 $' : '\u200E-$ 1,234.56'}
       ${'he-IL'} | ${'USD'} | ${'\u200E-1,234.56 $'}
     `(
       'formats -1234.56 of $currency in $locale to expected $expected',
@@ -1113,6 +1124,7 @@ describe('I18n', () => {
         expect(sanitizeSpaces(result)).toBe(expected);
       },
     );
+    /* eslint-enable jest/no-if */
   });
 
   describe('#unformatCurrency()', () => {
@@ -2188,7 +2200,13 @@ describe('I18n', () => {
         ['Europe/Amsterdam', 'en-CA', 'CA', 'Jun 12, 2022', '6:34 p.m.'],
         ['Europe/Amsterdam', 'es', 'ES', '12 jun 2022', '18:34'],
         ['Europe/Amsterdam', 'fr', 'FR', '12 juin 2022', '18:34'],
-        ['Europe/Amsterdam', 'nl-NL', 'NL', '12 jun. 2022', '18:34'],
+        [
+          'Europe/Amsterdam',
+          'nl-NL',
+          'NL',
+          isModernNode ? '12 jun 2022' : '12 jun. 2022',
+          '18:34',
+        ],
         ['Europe/London', 'en-GB', 'GB', '12 Jun 2022', '17:34'],
       ];
 
@@ -2516,8 +2534,5 @@ describe('I18n', () => {
 });
 
 function sanitizeSpaces(input) {
-  return input
-    .replace('\xa0', ' ')
-    .replace('\u202f', ' ')
-    .replace('\u00A0', ' ');
+  return input.replace(/[\u00a0\u202f]/g, ' ');
 }
diff --git a/packages/react-i18n/src/utilities/tests/translate.test.tsx b/packages/react-i18n/src/utilities/tests/translate.test.tsx
@@ -6,6 +6,8 @@ import {
   translate,
 } from '../translate';
 
+const isModernNode = process.version.startsWith('v18.');
+
 describe('memoizedNumberFormatter()', () => {
   it.each`
     locale                             | expectedValue | expectedLocale
@@ -18,7 +20,7 @@ describe('memoizedNumberFormatter()', () => {
     ${'fa-IR-u-nu-arabext-x-ab-cdefg'} | ${'1.23'}     | ${'fa-IR-u-nu-latn'}
     ${'fa-IR-x-ab-cdefg-u-nu-arabext'} | ${'1.23'}     | ${'fa-IR-u-nu-latn'}
   `(
-    'returns formatted number according to the locale provided with the latin numbering system',
+    'returns formatted number in the $locale locale with the latin numbering system',
     ({locale, expectedValue, expectedLocale}) => {
       const amount = 1.23;
       const numberFormatter = memoizedNumberFormatter(locale, {
@@ -31,18 +33,19 @@ describe('memoizedNumberFormatter()', () => {
     },
   );
 
+  /* eslint-disable jest/no-if */
   it.each`
-    locale                             | expectedValue     | expectedLocale
-    ${'en-US'}                         | ${'$1.23'}        | ${'en-US-u-nu-latn'}
-    ${'fr-CA'}                         | ${'1,23 $ US'}    | ${'fr-CA-u-nu-latn'}
-    ${'zh-Hans-hk'}                    | ${'US$1.23'}      | ${'zh-Hans-HK-u-nu-latn'}
-    ${'ar-EG'}                         | ${'US$ 1.23'}     | ${'ar-EG-u-nu-latn'}
-    ${'ar-EG-u-nu-arab'}               | ${'US$ 1.23'}     | ${'ar-EG-u-nu-latn'}
-    ${'fa-IR'}                         | ${'\u200E$ 1.23'} | ${'fa-IR-u-nu-latn'}
-    ${'fa-IR-u-nu-arabext-x-ab-cdefg'} | ${'\u200E$ 1.23'} | ${'fa-IR-u-nu-latn'}
-    ${'fa-IR-x-ab-cdefg-u-nu-arabext'} | ${'\u200E$ 1.23'} | ${'fa-IR-u-nu-latn'}
+    locale                             | expectedValue                                   | expectedLocale
+    ${'en-US'}                         | ${'$1.23'}                                      | ${'en-US-u-nu-latn'}
+    ${'fr-CA'}                         | ${'1,23 $ US'}                                  | ${'fr-CA-u-nu-latn'}
+    ${'zh-Hans-hk'}                    | ${'US$1.23'}                                    | ${'zh-Hans-HK-u-nu-latn'}
+    ${'ar-EG'}                         | ${isModernNode ? '\u200F1.23 US$' : 'US$ 1.23'} | ${'ar-EG-u-nu-latn'}
+    ${'ar-EG-u-nu-arab'}               | ${isModernNode ? '\u200F1.23 US$' : 'US$ 1.23'} | ${'ar-EG-u-nu-latn'}
+    ${'fa-IR'}                         | ${'\u200E$ 1.23'}                               | ${'fa-IR-u-nu-latn'}
+    ${'fa-IR-u-nu-arabext-x-ab-cdefg'} | ${'\u200E$ 1.23'}                               | ${'fa-IR-u-nu-latn'}
+    ${'fa-IR-x-ab-cdefg-u-nu-arabext'} | ${'\u200E$ 1.23'}                               | ${'fa-IR-u-nu-latn'}
   `(
-    'returns formatted currency according to the locale provided with the latin numbering system',
+    'returns formatted currency in the $locale locale with the latin numbering system',
     ({locale, expectedValue, expectedLocale}) => {
       const amount = 1.23;
       const numberFormatter = memoizedNumberFormatter(locale, {
@@ -55,6 +58,7 @@ describe('memoizedNumberFormatter()', () => {
       );
     },
   );
+  /* eslint-enable jest/no-if */
 
   describe('when Intl.Locale throws an error', () => {
     beforeEach(() => {
@@ -78,7 +82,7 @@ describe('memoizedNumberFormatter()', () => {
       ${'fa-IR-u-nu-arabext-x-ab-cdefg'} | ${'1.23'}     | ${'fa-IR-u-nu-latn'}
       ${'fa-IR-x-ab-cdefg-u-nu-arabext'} | ${'1.23'}     | ${'fa-IR-u-nu-latn'}
     `(
-      'returns formatted number according to the locale provided, falling back to appending the latin numbering system',
+      'returns formatted number in the $locale locale, falling back to appending the latin numbering system',
       ({locale, expectedValue, expectedLocale}) => {
         const amount = 1.23;
         const numberFormatter = memoizedNumberFormatter(locale, {
@@ -91,18 +95,19 @@ describe('memoizedNumberFormatter()', () => {
       },
     );
 
+    /* eslint-disable jest/no-if */
     it.each`
-      locale                             | expectedValue     | expectedLocale
-      ${'en-US'}                         | ${'$1.23'}        | ${'en-US-u-nu-latn'}
-      ${'fr-CA'}                         | ${'1,23 $ US'}    | ${'fr-CA-u-nu-latn'}
-      ${'zh-Hans-hk'}                    | ${'US$1.23'}      | ${'zh-Hans-HK-u-nu-latn'}
-      ${'ar-EG'}                         | ${'US$ 1.23'}     | ${'ar-EG-u-nu-latn'}
-      ${'ar-EG-u-nu-arab'}               | ${'US$ 1.23'}     | ${'ar-EG-u-nu-latn'}
-      ${'fa-IR'}                         | ${'\u200E$ 1.23'} | ${'fa-IR-u-nu-latn'}
-      ${'fa-IR-u-nu-arabext-x-ab-cdefg'} | ${'\u200E$ 1.23'} | ${'fa-IR-u-nu-latn'}
-      ${'fa-IR-x-ab-cdefg-u-nu-arabext'} | ${'\u200E$ 1.23'} | ${'fa-IR-u-nu-latn'}
+      locale                             | expectedValue                                   | expectedLocale
+      ${'en-US'}                         | ${'$1.23'}                                      | ${'en-US-u-nu-latn'}
+      ${'fr-CA'}                         | ${'1,23 $ US'}                                  | ${'fr-CA-u-nu-latn'}
+      ${'zh-Hans-hk'}                    | ${'US$1.23'}                                    | ${'zh-Hans-HK-u-nu-latn'}
+      ${'ar-EG'}                         | ${isModernNode ? '\u200F1.23 US$' : 'US$ 1.23'} | ${'ar-EG-u-nu-latn'}
+      ${'ar-EG-u-nu-arab'}               | ${isModernNode ? '\u200F1.23 US$' : 'US$ 1.23'} | ${'ar-EG-u-nu-latn'}
+      ${'fa-IR'}                         | ${'\u200E$ 1.23'}                               | ${'fa-IR-u-nu-latn'}
+      ${'fa-IR-u-nu-arabext-x-ab-cdefg'} | ${'\u200E$ 1.23'}                               | ${'fa-IR-u-nu-latn'}
+      ${'fa-IR-x-ab-cdefg-u-nu-arabext'} | ${'\u200E$ 1.23'}                               | ${'fa-IR-u-nu-latn'}
     `(
-      'returns formatted currency according to the locale provided, falling back to appending the latin numbering system',
+      'returns formatted currency in the $locale locale, falling back to appending the latin numbering system',
       ({locale, expectedValue, expectedLocale}) => {
         const amount = 1.23;
         const numberFormatter = memoizedNumberFormatter(locale, {
@@ -115,6 +120,7 @@ describe('memoizedNumberFormatter()', () => {
         );
       },
     );
+    /* eslint-enable jest/no-if */
   });
 });
 
@@ -289,8 +295,5 @@ describe('translate()', () => {
 });
 
 function sanitizeSpaces(input) {
-  return input
-    .replace('\xa0', ' ')
-    .replace('\u202f', ' ')
-    .replace('\u00A0', ' ');
+  return input.replace(/[\u00a0\u202f]/g, ' ');
 }
diff --git a/packages/storybook-a11y-test/tests/index.test.ts b/packages/storybook-a11y-test/tests/index.test.ts
@@ -21,11 +21,17 @@ describe('can test a story', () => {
 
   beforeAll(() => {
     return new Promise((resolve, reject) => {
+      // node 18 and webpack 4 do not play nice together.
+      // this can be removed once we update storybook to v7, and thus
+      // remove the dependency on webpack 4
+      const env = process.version.startsWith('v18.')
+        ? // eslint-disable-next-line no-process-env
+          {...process.env, NODE_OPTIONS: '--openssl-legacy-provider'}
+        : undefined;
+
       exec(
         `yarn run build-storybook`,
-        {
-          cwd: path.resolve(__dirname, '../'),
-        },
+        {cwd: path.resolve(__dirname, '../'), env},
         (error) => {
           if (error) {
             reject(new Error(`Unable to build storybook. ${error}`));