MM-67214: Upgrade to React 18 and migrate tests to React Testing Library #1267

nevyangelova · 2026-01-29T08:49:45Z

Summary

Upgraded React from 16.14.0 to 18.2.0
Upgraded react-dom from 16.8.6 to 18.2.0
Upgraded react-redux from 7.2.9 to 8.1.3
Upgraded react-select from 3.2.0 to 5.10.0
Upgraded react-intl from 4.5.0 to 6.8.0
Removed Enzyme and migrated all tests to React Testing Library.
Updated Babel configuration for React 18 automatic JSX runtime.
Fixed react-select type imports for v5 compatibility.

Ticket Link

https://mattermost.atlassian.net/browse/MM-67214

marianunez · 2026-01-29T16:34:33Z

webapp/src/components/data_selectors/jira_epic_selector/jira_epic_selector.test.tsx

-        let args = props.searchIssues.mock.calls[0][0];
-        expect(args).toEqual({
-            fields: 'customfield_10011',
-            jql: 'project=KT and issuetype=10000  ORDER BY updated DESC',
-            q: '',
-            instance_id: 'https://something.atlassian.net',


It seems that we lost the check for the args here and in the one below we are not checking for all of them?

marianunez · 2026-01-29T16:37:07Z

webapp/src/components/data_selectors/jira_epic_selector/jira_epic_selector.test.tsx

+            );
+        });
+
+        expect(ref.current).toBeDefined();


Should we check other elements directly? Seems that just checking that the component exists is lowering the quality of the test compared to snapshot

This applies to all cases below where the snapshot has been removed.

The issues are with internal validation that runs when the component is fully mounted. This is done when validator collects validation functions from child components. The issue is that with deep rendering child components register their validators and when handleCreate is called validation fails because the child components aren't fully set up.

The tests were designed for shallow rendering which doesn't run full lifecycle. I would propose to add new tests as we develop new features and fix bugs, as direct rewrite would be very difficult and time consuming atm. but if you think it can be prioritised I can do it :)

@marianunez I updated what I could in order to replicate the old tests, I think I covered a pretty good chunk of them!

marianunez · 2026-01-29T16:38:51Z

webapp/src/components/data_selectors/jira_epic_selector/jira_epic_selector.test.tsx

+        jest.clearAllMocks();
+    });
+
+    test('should match snapshot', async () => {


The test name should also be updated if no snapshots are being used

marianunez · 2026-01-29T16:40:20Z

webapp/package.json

-    "react-redux": "7.2.9",
-    "react-select": "3.2.0",
+    "react-redux": "8.1.3",
+    "react-select": "5.10.0",


This is a large jump for the react-select so we need to make sure we have a testing pass on any dropdowns to check for any regressions here @ogi-m

avasconcelos114

Added a couple of comments of my own but I would +1 on the renaming tests that no longer are related to snapshot testing

I'll likely need to spend more time to look through the changes in the modal tests

When it comes to the data_selectors, considering they're basically HoCs that only change the search logic and value preselection, I agree that full rendering feels like way more trouble than it's worth at this stage -- though maybe we can have a backlog task added to add tests on the BackendSelector itself

avasconcelos114 · 2026-01-30T13:17:36Z

...rc/components/jira_instance_and_project_selector/jira_instance_and_project_selector.test.tsx

+const renderWithRedux = (ui: React.ReactElement, initialState = defaultMockState) => {
+    const store = mockStore(initialState);
+    return {
+        store,
+        ...render(
+            <IntlProvider locale='en'>
+                <Provider store={store}>{ui}</Provider>
+            </IntlProvider>,
+        ),
+    };
+};


It feels like these repeated instances of renderWithRedux could be replaced with the one that was added as a part of test-utils.tsx, or was there a reason for them to have their own declaration in here and jira_epic_selector.test.tsx (among others)?

avasconcelos114 · 2026-01-30T14:00:33Z

webapp/src/components/modals/channel_subscriptions/channel_subscriptions.test.tsx

+    const mockTheme = {
+        centerChannelColor: '#333333',
+        centerChannelBg: '#ffffff',
+        buttonBg: '#166de0',
+        buttonColor: '#ffffff',
+        linkColor: '#2389d7',
+        errorTextColor: '#fd5960',
+    };


Nit: This is another thing that could be a constant provided by test utils to reduce repetition

…utils

avasconcelos114

Things are looking quite tidy now :) I think this leaves us in a good spot to continue bolstering the testing suite as we make new contributions

nevyangelova · 2026-02-05T09:41:53Z

@marianunez @ogi-m kind reminder to review

ogi-m

LGTM!

coderabbitai · 2026-02-09T14:59:58Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch MM-67214-react-18-upgrade

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nevyangelova requested a review from a team as a code owner January 29, 2026 08:49

nevyangelova added Work In Progress Not yet ready for review Do Not Merge Should not be merged until this label is removed labels Jan 29, 2026

nevyangelova force-pushed the MM-67214-react-18-upgrade branch from 026919c to bb5cdbf Compare January 29, 2026 11:07

MM-67120: Upgrade to React 18 and migrate tests to React Testing Library

a4be6df

nevyangelova force-pushed the MM-67214-react-18-upgrade branch from bb5cdbf to a4be6df Compare January 29, 2026 11:38

nevyangelova requested review from avasconcelos114, marianunez and ogi-m January 29, 2026 12:09

nevyangelova added 2: Dev Review Requires review by a core committer 3: QA Review Requires review by a QA tester and removed Do Not Merge Should not be merged until this label is removed Work In Progress Not yet ready for review labels Jan 29, 2026

marianunez requested changes Jan 29, 2026

View reviewed changes

Migrate Enzyme tests to React Testing Library

aa88c4f

avasconcelos114 requested changes Jan 30, 2026

View reviewed changes

Nevyana Angelova added 3 commits February 2, 2026 15:37

Fix remaining test failures after RTL migration

469bc2d

Fix RTL tests to properly call component methods with mocked validators

2a8caeb

Add full assertions for inclusion captions and project metadata tests

caef7db

nevyangelova force-pushed the MM-67214-react-18-upgrade branch from 9526517 to caef7db Compare February 2, 2026 10:35

Nevyana Angelova added 2 commits February 2, 2026 17:47

Rename snapshot tests and remove unnecessary comments

554b81f

Refactor tests to use shared renderWithRedux and mockTheme from test-…

f5acfd8

…utils

nevyangelova requested review from avasconcelos114 and marianunez February 2, 2026 11:01

avasconcelos114 approved these changes Feb 3, 2026

View reviewed changes

marianunez approved these changes Feb 5, 2026

View reviewed changes

nevyangelova removed the 2: Dev Review Requires review by a core committer label Feb 6, 2026

ogi-m approved these changes Feb 9, 2026

View reviewed changes

ogi-m removed the 3: QA Review Requires review by a QA tester label Feb 9, 2026

ogi-m added the 4: Reviews Complete All reviewers have approved the pull request label Feb 9, 2026

Merge branch 'master' into MM-67214-react-18-upgrade

607714e

nevyangelova merged commit 1eb57a2 into master Feb 9, 2026
10 of 11 checks passed

nevyangelova deleted the MM-67214-react-18-upgrade branch February 9, 2026 14:59

MM-67214: Upgrade to React 18 and migrate tests to React Testing Library #1267

MM-67214: Upgrade to React 18 and migrate tests to React Testing Library #1267

Uh oh!

Conversation

nevyangelova commented Jan 29, 2026

Summary

Ticket Link

Uh oh!

marianunez Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

marianunez Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

nevyangelova Jan 30, 2026 • 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!

nevyangelova Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

marianunez Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

marianunez Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

avasconcelos114 left a comment

Choose a reason for hiding this comment

Uh oh!

avasconcelos114 Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

avasconcelos114 Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

avasconcelos114 left a comment

Choose a reason for hiding this comment

Uh oh!

nevyangelova commented Feb 5, 2026

Uh oh!

ogi-m left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot commented Feb 9, 2026

Review skipped

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nevyangelova Jan 30, 2026 •

edited

Loading