chore: upgrde jest to v29 (#1473)

* chore: upgrde jest to v29

* fix: create react-native-reanimated patch

* fix: tests

* chore: fix react-native issues

* test: fix react native tests

* chore: fix react native tests

* test: fix ProgressBar test cases

* test: update snapshots

* test: fix styles in snapshots

* ci: enable jest sharding

* test: update Tooltip snapshot

* test: update Tooltip snapshot

* Update .github/workflows/blade-validate.yml

* chore: update snaps

* chore: patch bundlemon

* ci: apply patches when cache-hit

* ci: apply patches when cache-hit

.github/actions/install-dependencies/action.yml

@@ -18,8 +18,14 @@ runs:
         key: ${{ runner.os }}-blade-${{ hashFiles('**/yarn.lock') }}
 
     # cache miss - install packages with `yarn --frozen-lockfile`
-    # cache hit - download packages from the cache
+    # cache hit - download packages from the cache and explicitly run postinstall script
     - name: install packages if cache miss
       run: yarn --frozen-lockfile
       shell: bash
       if: steps.cache.outputs.cache-hit != 'true'
+
+    - name: Run postinstall script
+      run: yarn postinstall
+      working-directory: packages/blade
+      shell: bash
+      if: steps.cache.outputs.cache-hit == 'true'

.github/workflows/blade-validate.yml

@@ -26,9 +26,6 @@ jobs:
       - name: Run TypeScript Checks
         run: yarn typecheck
         working-directory: packages/blade
-      - name: Run Web & Native Tests
-        run: yarn test
-        working-directory: packages/blade
       - name: Check Bundle Size
         run: yarn bundlemon
         working-directory: packages/blade
@@ -37,3 +34,28 @@ jobs:
       - name: Check Tree Shaking
         run: yarn size-limit
         working-directory: packages/blade
+
+  test:
+    name: Run Tests (${{ matrix.shard }})
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1/4, 2/4, 3/4, 4/4]
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v3
+      - name: Use Node v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.12.1
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
+      - name: Build Blade
+        run: yarn build
+        working-directory: packages/blade
+      - name: Run React Tests
+        run: yarn test
+        working-directory: packages/blade
+        env:
+          SHARD: ${{ matrix.shard }}

packages/blade/docs/tokens/Border.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, DocsContainer } from '@storybook/addon-docs';
-import { useTheme, BladeProvider } from '../../src/components';
-import { makeBorderSize } from '../../src/utils';
+import { BladeProvider } from '../../src/components';
+import { makeBorderSize, useTheme } from '../../src/utils';
 import { paymentTheme, bankingTheme } from '../../src/tokens';
 
 <Meta

packages/blade/jest-setup.native.js

@@ -1,6 +1,12 @@
 /** Setup the React Native globals to differentiate between a web and react native app.
  * For browser we have `window`, for node we have `process` as globals, for React Native it's `global.navigator.product: ReactNative`
  **/
+import { configure } from '@testing-library/react-native';
+
+// Since v12, all queries exclude elements hidden from accessibility by default
+configure({
+  defaultIncludeHiddenElements: true,
+});
 
 Object.defineProperty(global.navigator, 'product', {
   value: 'ReactNative',

packages/blade/jest.web.config.js

@@ -10,6 +10,7 @@ const baseConfig = {
       statements: 75,
     },
   },
+  snapshotSerializers: ['<rootDir>/jestStyledComponentsSerializer.js'],
   moduleFileExtensions: ['web.ts', 'web.tsx', 'ts', 'tsx', 'js', 'json', 'node'],
   testMatch: ['**/*.test.{ts,tsx}'],
   transform: {

packages/blade/jestStyledComponentsSerializer.js

@@ -0,0 +1,5 @@
+// For compatibility with jest v28+, we need to export the serializer as a function.
+// See https://github.com/styled-components/jest-styled-components/issues/429
+const serializer = require('jest-styled-components').styleSheetSerializer;
+
+module.exports = serializer;

packages/blade/package.json

@@ -98,8 +98,8 @@
     "react": "yarn run react:storybook",
     "react:storybook": "NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT start-storybook -c ./.storybook/react -p 9009",
     "react:storybook:build": "NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT build-storybook -c ./.storybook/react -o storybook-site",
-    "test:react": "FRAMEWORK=REACT jest -c ./jest.web.config.js",
-    "test:react-native": "FRAMEWORK=REACT_NATIVE jest -c ./jest.native.config.js",
+    "test:react": "FRAMEWORK=REACT jest -c ./jest.web.config.js --shard=$SHARD --forceExit",
+    "test:react-native": "FRAMEWORK=REACT_NATIVE jest -c ./jest.native.config.js --shard=$SHARD --forceExit",
     "start:ios": "NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:ios",
     "start:android": "NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:android",
     "start:native": "NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:android react-native:storybook:ios",
@@ -160,13 +160,13 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/jest-native": "5.4.2",
     "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "5.1.2",
-    "@testing-library/react-native": "9.1.0",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react-native": "12.1.3",
     "@testing-library/user-event": "14.4.3",
     "@types/body-scroll-lock": "3.1.0",
     "@types/dedent": "0.7.0",
-    "@types/jest": "26.0.23",
-    "@types/jest-axe": "3.5.3",
+    "@types/jest": "29.5.3",
+    "@types/jest-axe": "3.5.5",
     "@types/jscodeshift": "0.11.6",
     "@types/jsdom": "20.0.1",
     "@types/lodash": "4.14.168",
@@ -177,7 +177,7 @@
     "@types/styled-components-react-native": "5.1.3",
     "any-leaf": "1.2.2",
     "args-parser": "1.3.0",
-    "babel-jest": "26.6.3",
+    "babel-jest": "29.6.1",
     "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-styled-components": "1.12.0",
@@ -190,10 +190,11 @@
     "figures": "3.2.0",
     "flat": "5.0.2",
     "ismobilejs": "1.1.1",
-    "jest": "26.6.3",
-    "jest-axe": "6.0.0",
+    "jest": "29.6.1",
+    "jest-axe": "8.0.0",
+    "jest-environment-jsdom": "29.6.1",
     "jest-matchmedia-mock": "1.1.0",
-    "jest-styled-components": "7.0.8",
+    "jest-styled-components": "7.1.1",
     "jest-useragent-mock": "0.1.1",
     "jscodeshift": "0.13.1",
     "jsdom": "20.0.2",
@@ -206,7 +207,7 @@
     "react-dom": "17.0.2",
     "react-native": "0.66.5",
     "react-native-gesture-handler": "2.9.0",
-    "react-native-reanimated": "2.12.0",
+    "react-native-reanimated": "2.14.4",
     "react-native-svg": "12.3.0",
     "react-scripts": "4.0.3",
     "react-test-renderer": "17.0.2",

packages/blade/patches/bundlemon+2.0.1.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/bundlemon/lib/main/analyzer/pathUtils.js b/node_modules/bundlemon/lib/main/analyzer/pathUtils.js
+index e9ce416..1c41a0c 100644
+--- a/node_modules/bundlemon/lib/main/analyzer/pathUtils.js
++++ b/node_modules/bundlemon/lib/main/analyzer/pathUtils.js
+@@ -42,6 +42,7 @@ function getAllPaths(dirPath) {
+         const files = entries.filter((file) => !file.isDirectory()).map((file) => path.join(dirPath, file.name));
+         const folders = entries.filter((folder) => folder.isDirectory());
+         for (const folder of folders)
++            if (folder.name !== 'node_modules')
+             files.push(...(yield getAllPaths(path.join(dirPath, folder.name))));
+         return files;
+     });

packages/blade/src/components/Accordion/__tests__/Accordion.native.test.tsx

@@ -8,7 +8,9 @@ import { Button } from '~components/Button';
 describe('<Accordion />', () => {
   // Accordion uses Collapsible which uses animations and requestAnimationFrame which makes RN tests throw warnings
   beforeEach(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers({
+      legacyFakeTimers: true,
+    });
   });
   afterEach(() => {
     jest.useRealTimers();