feat: [UEPR-57] migrate to react v18 #9311

MiroslavDionisiev · 2025-03-13T13:55:52Z

Resolves:

UEPR-57

Changes:

Updated react to v18 and other related packages. For the packages that are also in scratch-gui the version is used. Updated studios routing. The previously used testing framework - Enzyme, won't be supported for react-18 and tests are migrated to React Testing Library (RTL). Most of the component tests rely on asserting props and state of the component, however RTL doesn't allow such assertions as what is intended to be tested by the library is only what the user would interact with. To bypass this there is a wrapper around the render method from RTL that searches the structure of the React element for the node that contains the props and state. We should discuss the approach before further updating the rest of the tests.
Added script to generate translations before executing tests.
Removed use of DefaultProps that will be deprecated in future releases for functional components.

…use of default props

…sts in ci-cd

cwillisf

I picked a nit or two, but it's low-priority stuff. Kudos for getting through this!
👏👏👏

cwillisf · 2025-08-04T16:42:36Z

.github/workflows/ci-cd.yml

+          # run unit tests in development mode to address error "act(...) is not supported in production builds of React"
+          NODE_ENV=development JEST_JUNIT_OUTPUT_NAME=unit-jest-results.xml npm run test:unit:jest:unit -- --reporters=jest-junit


If test:unit:jest:unit doesn't work outside of dev mode, would it make sense to move the NODE_ENV=development part into package.json? Something like:

"test:unit:jest:unit": "cross-env NODE_ENV=development jest ..."

cwillisf · 2025-08-04T16:44:27Z

src/components/avatar/avatar.jsx

-const Avatar = props => (
+const Avatar = ({
+    className,
+    src = '//uploads.scratch.mit.edu/get_image/user/2584924_24x24.png?v=1438702210.96',


...lol. Thanks, Ray.

cwillisf · 2025-08-04T17:01:42Z

src/components/nestedcarousel/nestedcarousel.jsx

-            );
-        }
+    for (let i = 0; i < items.length; i++) {
+        const thumbnails = items[i].thumbnails.map((item, j) => (


cwillisf · 2025-08-04T17:07:57Z

src/components/social-message/social-message.jsx

-const SocialMessage = props => (
-    <props.as className={classNames('social-message', props.className)}>
+const SocialMessage = ({
+    as: Tag = 'li',


cwillisf · 2025-08-04T17:18:08Z

src/components/teacher-banner/teacher-banner.jsx

+    messages = {
+        'teacherbanner.greeting': 'Hi',
+        'teacherbanner.subgreeting': 'Teacher Account',
+        'teacherbanner.classesButton': 'My Classes',
+        'teacherbanner.resourcesButton': 'Educator Resources',
+        'teacherbanner.faqButton': 'Teacher Account FAQ'
+    },


Do you know if this complicates message scraping? I don't expect this change to make it worse, but it made me curious.

Compared to the previous state or to something else? Speaking without full certainty, but I believe this change should lead to the same bundle outcome as the previous one - and these default values should be visible to scrapers.

test/unit/components/compose-comment.test.jsx

cwillisf · 2025-08-05T02:16:45Z

test/unit/components/donate-banner.test.jsx

+        expect(donateText.textContent).toEqual(
+            'Scratch is a nonprofit that relies on donations to keep our platform free for all kids. Your gift of $5 will make a difference.'


Maybe a snapshot would be better?

cwillisf · 2025-08-05T02:19:01Z

test/unit/components/email-step.test.jsx

            .then(response => {
                expect(mockedValidateEmailRemotely).toHaveBeenCalledTimes(1);
                expect(response.valid).toBe(false);
                expect(response.errMsgId).toBe('general.error');
            })
            .then(() => {
                // make the same request a second time
-                instance.validateEmailRemotelyWithCache('[email protected]')
+                emailStepInstance.validateEmailRemotelyWithCache('[email protected]')
                    .then(response => {
                        expect(mockedValidateEmailRemotely).toHaveBeenCalledTimes(2);
                        expect(response.valid).toBe(false);


Phew! That file was a lot ;)

cwillisf · 2025-08-05T02:19:40Z

test/unit/components/errorboundary.test.jsx

+
+    useEffect(() => {
+        if (hasRendered.current) {
+            throw new Error('This component has been re-rendered!');


cwillisf · 2025-08-05T02:26:55Z

.gitignore

@@ -21,6 +21,7 @@ ENV

 # Test
 /test/results/*
+/test/generated/generated-locales.js


Props for remembering to add this line!

KManolov3 · 2025-08-26T12:00:32Z

src/components/grid/grid.jsx

@@ -52,12 +63,19 @@ const Grid = props => {
                        <Thumbnail
                            href={href}
                            key={key}
+                            loves={item.stats.loves}


Were those added on purpose?

KManolov3 · 2025-08-26T12:16:30Z

src/views/studio/studio-description.jsx

-    StudioDescription.handleClickOutside = () => {
+    const ref = useRef(null);
+
+    useOnClickOutside(ref, () => {


Did we test this?

KManolov3 · 2025-08-26T12:19:48Z

src/views/studio/studio-tab-nav.jsx

    const base = `/${studioPath}/${studioId}`;
+    const classes = useCallback(({isActive}) => `nav-link ${isActive ? 'activated' : ''}`);


Should these be nav_link and active ?

MiroslavDionisiev added 2 commits March 13, 2025 15:35

feat: [UEPR-57] migrate to react v18

a739682

feat: [UEPR-57] update tests to use react testing library and remove …

dce8c99

…use of default props

MiroslavDionisiev marked this pull request as ready for review April 22, 2025 06:38

Merge remote-tracking branch 'origin/develop' into react-18-update

d0d00ed

MiroslavDionisiev requested review from KManolov3 and cwillisf April 23, 2025 06:59

MiroslavDionisiev added 5 commits April 23, 2025 10:18

fix: [UEPR-57] fix failing spec after change of banner text

45de5f5

fix: [UEPR-57] add generate locals to ci-cd workflow

5ca5c20

fix: [UEPR-57] change import of act

a383ed8

fix: [UEPR-57] change import of act and change the node env we run te…

01dd173

…sts in ci-cd

chore: [UEPR-57] run tests in development mode

6dc8bcc

cwillisf approved these changes Aug 5, 2025

View reviewed changes

KManolov3 added 4 commits August 25, 2025 11:29

Merge remote-tracking branch 'upstream/develop' into react-18-update

8ce58e4

Merge remote-tracking branch 'upstream/develop' into react-18-update

c65391b

feat: extract NODE_ENV=development to package.json

1112aa4

fix: update tests according to PR comments

575c827

KManolov3 reviewed Aug 26, 2025

View reviewed changes

KManolov3 added 7 commits August 26, 2025 17:20

fix: address comments

8413829

fix: pass ref to containers where useOnClickOutside is used

dc9d677

chore: upgrade to newest gui prerelease version

9c86bac

Merge remote-tracking branch 'upstream/develop' into react-18-update

26d646e

fix: add cross-env library

e0d67eb

fix: set NODE_ENV on jest commands themselves

59c64bd

Merge remote-tracking branch 'upstream/develop' into HEAD

6625f1e

KManolov3 requested a review from cwillisf September 2, 2025 13:34

cwillisf approved these changes Sep 2, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: [UEPR-57] migrate to react v18 #9311

feat: [UEPR-57] migrate to react v18 #9311

MiroslavDionisiev commented Mar 13, 2025 •

edited

Loading

Uh oh!

cwillisf left a comment

Uh oh!

cwillisf Aug 4, 2025

Uh oh!

cwillisf Aug 4, 2025

Uh oh!

cwillisf Aug 4, 2025

Uh oh!

cwillisf Aug 4, 2025

Uh oh!

cwillisf Aug 4, 2025

Uh oh!

KManolov3 Aug 25, 2025

Uh oh!

Uh oh!

cwillisf Aug 5, 2025

Uh oh!

cwillisf Aug 5, 2025

Uh oh!

cwillisf Aug 5, 2025

Uh oh!

cwillisf Aug 5, 2025

Uh oh!

KManolov3 Aug 26, 2025

Uh oh!

KManolov3 Aug 26, 2025

Uh oh!

KManolov3 Aug 26, 2025 •

edited

Loading

Uh oh!

Uh oh!

		# run unit tests in development mode to address error "act(...) is not supported in production builds of React"
		NODE_ENV=development JEST_JUNIT_OUTPUT_NAME=unit-jest-results.xml npm run test:unit:jest:unit -- --reporters=jest-junit

		expect(donateText.textContent).toEqual(
		'Scratch is a nonprofit that relies on donations to keep our platform free for all kids. Your gift of $5 will make a difference.'

		const base = `/${studioPath}/${studioId}`;
		const classes = useCallback(({isActive}) => `nav-link ${isActive ? 'activated' : ''}`);

feat: [UEPR-57] migrate to react v18 #9311

Are you sure you want to change the base?

feat: [UEPR-57] migrate to react v18 #9311

Conversation

MiroslavDionisiev commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Resolves:

Changes:

Uh oh!

cwillisf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KManolov3 Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MiroslavDionisiev commented Mar 13, 2025 •

edited

Loading

KManolov3 Aug 26, 2025 •

edited

Loading