chore: upgrde jest to v29 #1473

snitin315 · 2023-07-26T05:33:05Z

Dependency Changes

Note
Didn't upgrade @testing-library/react to v13+ since it drops support for React 17 and earlier.

Upgraded the following dependencies to their latest version:
- @testing-library/react-hooks to v8
- @testing-library/react-native to v12.1.3
- babel-jest, jest, and jest-environment-jsdom to v29.6.1
- jest-axe to v8
- jest-styled-components to v7.1.1
- react-native-reanimated to v2.14.4, for compatibility with Jest v28+

Jest Config Changes

Configured defaultIncludeHiddenElements: true for @testing-library/react-native to keep the old behavior. Since v12, all queries exclude elements hidden from accessibility by default.
Added --forceExit to the test:react and test:react-native.
- These scripts without --forceexit now fail on CI when Jest doesn't; shut down cleanly (Existing behavior, for example BottomSheet tests)
- Ideally, we should detect the cause and refactor the corresponding tests, which can be tackled as a separate issue.
Added workaround for jest-styled-components snapshot serializer.
- Doesn't seem to support Jest 28 and newest styled-components/jest-styled-components#429

Source Code Changes

In the makeAccessible.native.ts util, explicitly add accessible={true} prop as well along with other accessibility props.
- This was required because *ByRole queries now return only accessibility elements, either explicitly marked with accessible prop or implicit ones where this status is derived from component type itself (e.g Text, TextInput, Switch, but not View).

Test Changes

In Jest v28, Fake timers were refactored to allow passing options..
- Added legacyFakeTimers: true in tests which were breaking to use the old fake timers implementation instead of one backed by @sinonjs/fake-timers. The default is false.
```
- jest.useFakeTimers();
+ jest.useFakeTimers({
+  legacyFakeTimers: true,
+ });
```
getByA11yValue is deprecated, refactored ProgressBar.native.test.tsx to use expect(progressbar).toHaveAccessibilityValue({})
getAllByA11yRole, getByA11yLabel aliases were removed in favor of getAllByRole, getByLabelText respectively.
- feat(breaking): migrate Flow to TS; remove some deprecated functions and aliases callstack/react-native-testing-library#881

Snapshot Changes

As announced in the Jest 28 blog post, Jest 29 has changed the default snapshot formatting to {escapeString: false, printBasicPrototype: false}. This makes snapshots both more readable and more copy-pasteable.

GitHub Action Changes

Refactored validate workflow to enable Jest Sharding, which has reduced the total workflow time by 3-4 minutes.

changeset-bot · 2023-07-26T05:33:08Z

⚠️ No Changeset found

Latest commit: 1885bc2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

codesandbox-ci · 2023-07-26T05:35:27Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1885bc2:

Sandbox	Source
razorpay/blade: basic	Configuration

github-actions · 2023-07-28T02:07:36Z

✅ PR title follows Conventional Commits specification.

anuraghazra · 2023-07-31T13:04:24Z

packages/blade/patches/react-native-reanimated+2.12.0.patch

@@ -0,0 +1,34 @@
+diff --git a/node_modules/react-native-reanimated/lib/reanimated2/jestUtils.js b/node_modules/react-native-reanimated/lib/reanimated2/jestUtils.js


do we need this patch? I'm seeing some fixes regarding this on reanimated repo can we upgrade reanimated to latest minor and check?

software-mansion/react-native-reanimated#3559

Upgraded reanimated and it works!

I don't know why that issue is still open, I thought it wasn't fixed in master.

anuraghazra · 2023-07-31T13:06:39Z

packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.web.test.tsx.snap

-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}


it seems that all the generated CSS got removed from snapshots this should not happen as we deliberately enabled snapshots to include the CSS rules. Maybe check styled-components repo for jest 29 guides

Fixed, it seems jest-styled-components is not compatible with jest v28+.

Doesn't seem to support Jest 28 and newest styled-components/jest-styled-components#429

anuraghazra · 2023-07-31T13:11:32Z

packages/blade/src/utils/makeAccessible/makeAccessible.native.ts

@@ -11,6 +11,8 @@ import type { AccessibilityMap, AccessibilityProps } from './types';
 export const makeAccessible = (props: Partial<AccessibilityProps>): Record<string, unknown> => {
  const newProps: Record<string, any> = {};

+  newProps.accessible = true;


This might cause issues on react-native and change accessibility behaviours, because now anywhere we have used makeAccessible will cause that element to become a single selectable element and won't be able to select the nested elements.

https://reactnative.dev/docs/accessibility#accessible

@anuraghazra But we are adding accessible={true} to the elements only which have other accessibility props, like accessibilityLabel, etc so it should be fine. Having other accessible props means, we do want to make the component accessible, right?

Now, it is mandatory to have accessible={true}, otherwise *ByRole queries won't return these elements.

Thik hai i'll test the a11y on my device once and let you know if this is causing some issue.

Okay tested each component manually on RN, most of them looks good.

There are some minor changes like in Indicator component now consumers won't be able to go into the text node and read out the "Success" text

But i think this is fine because it still announces the accessibilityLabel as "Status ok".
Anyway if we want to manually disable accessible prop we can just pass accessible: false when using makeAccessible, so we will just need to be a bit careful.

kamleshchandnani · 2023-08-01T11:44:05Z

@snitin315 rebase with master first so chromatic optimisations can kick in?

.github/workflows/blade-validate.yml

bundlemon · 2023-08-07T05:09:31Z

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	React Native Components _{build/components/index.native.js}	167.12KB (+12B +0.01%)	-

Unchanged files (13)

Status	Path	Size	Limits
✅	Web Components _{build/components/index.production.web.js}	230.48KB	-
✅	React Native Tokens _{build/tokens/index.native.js}	28.48KB	-
✅	Web Tokens _{build/tokens/index.production.web.js}	27.81KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeDarkDesktop.css}	3.7KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeLightDesktop.css}	3.7KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeDarkMobile.css}	3.69KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeLightMobile.css}	3.69KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeLightDesktop.css}	3.69KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeLightMobile.css}	3.68KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeDarkDesktop.css}	3.67KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeDarkMobile.css}	3.66KB	-
✅	Web Utils _{build/utils/index.production.web.js}	2.92KB	-
✅	React Native Utils _{build/utils/index.native.js}	2.08KB	-

Total files change +8B 0%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

anuraghazra · 2023-08-07T07:01:20Z

.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


is this something newly changed or github is just showing the old diff?

anuraghazra · 2023-08-07T07:02:10Z

packages/blade/patches/bundlemon+2.0.1.patch

+         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')


whats with bundlemon?

anuraghazra

LGTM

chaitanyadeorukhkar · 2023-08-07T07:30:17Z

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


Raise an issue on bundlemon?

* 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

snitin315 force-pushed the feat/upgrade-jest branch from 0bade07 to 0f48cd6 Compare July 31, 2023 03:05

snitin315 marked this pull request as ready for review July 31, 2023 05:26

snitin315 requested review from chaitanyadeorukhkar, kamleshchandnani, anuraghazra, dhruvdutt, nashcheez, divyanshu013 and saurabhdaware as code owners July 31, 2023 05:26

snitin315 added the Review - L1 First level of review label Jul 31, 2023

snitin315 assigned anuraghazra Jul 31, 2023

anuraghazra reviewed Jul 31, 2023

View reviewed changes

snitin315 added 9 commits August 2, 2023 15:10

chore: upgrde jest to v29

871dcb8

fix: create react-native-reanimated patch

664534f

fix: tests

5110072

chore: fix react-native issues

4d1f8cc

test: fix react native tests

eb6babf

chore: fix react native tests

a21fd86

test: fix ProgressBar test cases

93edb94

test: update snapshots

329eedd

test: fix styles in snapshots

3fa56a3

snitin315 force-pushed the feat/upgrade-jest branch from 305dd34 to 3fa56a3 Compare August 2, 2023 10:35

ci: enable jest sharding

fc452a2

snitin315 closed this Aug 2, 2023

snitin315 reopened this Aug 2, 2023

snitin315 added 2 commits August 3, 2023 05:48

test: update Tooltip snapshot

2b53c42

test: update Tooltip snapshot

71a254b

chaitanyadeorukhkar mentioned this pull request Aug 4, 2023

build: upgrade react to v18 & react native v0.72 #1507

Merged

snitin315 commented Aug 6, 2023

View reviewed changes

.github/workflows/blade-validate.yml Outdated Show resolved Hide resolved

snitin315 and others added 6 commits August 6, 2023 15:49

Update .github/workflows/blade-validate.yml

91168ac

Merge branch 'master' into feat/upgrade-jest

0d7af06

chore: update snaps

dd10d9e

chore: patch bundlemon

2465ed8

ci: apply patches when cache-hit

9759702

ci: apply patches when cache-hit

1885bc2

anuraghazra reviewed Aug 7, 2023

View reviewed changes

anuraghazra approved these changes Aug 7, 2023

View reviewed changes

chaitanyadeorukhkar reviewed Aug 7, 2023

View reviewed changes

chaitanyadeorukhkar approved these changes Aug 7, 2023

View reviewed changes

snitin315 merged commit 6e016e1 into master Aug 7, 2023
13 checks passed

snitin315 deleted the feat/upgrade-jest branch August 7, 2023 09:15

snitin315 mentioned this pull request Sep 4, 2023

Remove Individual Icons Tests #1243

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: upgrde jest to v29 #1473

chore: upgrde jest to v29 #1473

snitin315 commented Jul 26, 2023 •

edited

Loading

changeset-bot bot commented Jul 26, 2023 •

edited

Loading

codesandbox-ci bot commented Jul 26, 2023 •

edited

Loading

github-actions bot commented Jul 28, 2023 •

edited

Loading

anuraghazra Jul 31, 2023

snitin315 Aug 2, 2023

anuraghazra Jul 31, 2023

snitin315 Aug 2, 2023

anuraghazra Jul 31, 2023

snitin315 Aug 2, 2023

anuraghazra Aug 3, 2023

anuraghazra Aug 7, 2023

kamleshchandnani commented Aug 1, 2023

bundlemon bot commented Aug 7, 2023

anuraghazra Aug 7, 2023

anuraghazra Aug 7, 2023

anuraghazra left a comment

chaitanyadeorukhkar Aug 7, 2023

		@@ -0,0 +1,34 @@
		diff --git a/node_modules/react-native-reanimated/lib/reanimated2/jestUtils.js b/node_modules/react-native-reanimated/lib/reanimated2/jestUtils.js

		@@ -0,0 +1,12 @@
		diff --git a/node_modules/bundlemon/lib/main/analyzer/pathUtils.js b/node_modules/bundlemon/lib/main/analyzer/pathUtils.js

chore: upgrde jest to v29 #1473

chore: upgrde jest to v29 #1473

Conversation

snitin315 commented Jul 26, 2023 • edited Loading

Dependency Changes

Jest Config Changes

Source Code Changes

Test Changes

Snapshot Changes

GitHub Action Changes

changeset-bot bot commented Jul 26, 2023 • edited Loading

⚠️ No Changeset found

codesandbox-ci bot commented Jul 26, 2023 • edited Loading

github-actions bot commented Jul 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kamleshchandnani commented Aug 1, 2023

bundlemon bot commented Aug 7, 2023

BundleMon

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anuraghazra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snitin315 commented Jul 26, 2023 •

edited

Loading

changeset-bot bot commented Jul 26, 2023 •

edited

Loading

codesandbox-ci bot commented Jul 26, 2023 •

edited

Loading

github-actions bot commented Jul 28, 2023 •

edited

Loading