[test] Disable `react-transition-group` transitions in unit testing #16288

lauri865 · 2025-01-21T15:21:10Z

I have followed (at least) the PR section of the contributing guide.

An experiment to remove transitions from unit tests in order to make tests more stable. Lots of tests breaking due to act errors, which more often than not are related to the Transition component of react-transition-group. Would be good to disable it globally, and get rid of unnecessary waitFor calls as a result to make testing faster as well as more stable.

I don't have more time to dig into this now, so will leave it at this, if anyone wants to explore it further. Some tests broke as a result.

UPDATE (Lukas)

Used config.disabled = true to disable transitions in mocha and karma tests
Remove waitFor usage where it was possible (mostly since transitions are no longer causing the need for it)

mui-bot · 2025-01-21T15:24:38Z

Deploy preview: https://deploy-preview-16288--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against d05549a

…r a hidden element

test/utils/mochaHooks.js

LukasTy · 2025-01-22T11:01:04Z

@lauri865 @mui/xgrid WDYT about the updated approach of https://reactcommunity.org/react-transition-group/testing/? 🤔
Some problematic tests would have to be adjusted. 🙈

lauri865 · 2025-01-22T11:09:08Z

@lauri865 @mui/xgrid WDYT about the updated approach of https://reactcommunity.org/react-transition-group/testing/? 🤔 Some problematic tests would have to be adjusted. 🙈

Ah, nice find! Seems to break less tests it seems as well.

Wonder why they suggested an alternative approach here? 🤔
https://testing-library.com/docs/example-react-transition-group/

LukasTy · 2025-01-23T08:59:49Z

Ah, nice find! Seems to break less tests it seems as well.

Wonder why they suggested an alternative approach here? 🤔 https://testing-library.com/docs/example-react-transition-group/

I am not sure; maybe they are suggesting going for maximum efficiency and completely mocking the module to avoid any potential overhead.
I've used sinon.stub in the latest implementation to assert this idea. 😉
There are some Data Grid browser tests failing after this. 🤔

lauri865 · 2025-01-23T13:07:46Z

Ah, nice find! Seems to break less tests it seems as well.
Wonder why they suggested an alternative approach here? 🤔 https://testing-library.com/docs/example-react-transition-group/

I am not sure; maybe they are suggesting going for maximum efficiency and completely mocking the module to avoid any potential overhead. I've used sinon.stub in the latest implementation to assert this idea. 😉 There are some Data Grid browser tests failing after this. 🤔

I'm not insinuating it's better. I found it difficult to fake the components due to some state being dependent on transition life-cycle events, hence I overrode props instead.

Are you use the latest one works? Transition component children are functions in many instances, and this should error out ("functions are not valid children" yaddayadda).

mui-x/test/utils/mochaHooks.js

Line 24 in 583b078

    
           function FakeTransition({ children }) { return <React.Fragment>{children}</React.Fragment>; };

If the config prop works, I think it's probably the best bet.

github-actions · 2025-01-27T06:26:44Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

LukasTy · 2025-01-27T11:05:22Z

packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx

@@ -1776,6 +1777,10 @@ describe('<DataGridPremium /> - Row grouping', () => {
    });

    it('should add a "Stop grouping {field}" menu item for each grouping criteria on the grouping column when prop.rowGroupingColumnMode = "single"', () => {
+      const restoreDisabledConfig = config.disabled;
+      // enable `react-transition-group` transitions for this test
+      config.disabled = false;


This test needs animations or refactoring.

LukasTy · 2025-01-27T11:05:55Z

packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx

@@ -198,6 +199,10 @@ describe('<DataGridPro /> - Column headers', () => {
    });

    it('should remove the MuiDataGrid-menuOpen CSS class only after the transition has ended', () => {
+      const restoreDisabledConfig = config.disabled;
+      // enable `react-transition-group` transitions for this test
+      config.disabled = false;


This test needs animations with timeouts or a complete refactor/removal

packages/x-data-grid/src/tests/rows.DataGrid.test.tsx

github-actions · 2025-01-27T19:10:44Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

LukasTy · 2025-01-29T14:27:56Z

@lauri865 Thank you for the suggestion. 👌
I think the PR is ready for review. 👍
P.S. I've ran the additional tests pipeline to check if there are any new failing tests, but it seems that those are the same from master.

LukasTy · 2025-01-30T08:36:22Z

It feels as if we can't move forward with this until Data Grid tests are stabilized. 🙈
On every new run, some new tests might start failing...

lauri865 · 2025-01-30T08:52:31Z

Great work! Curiously though, the unit tests seem to run much slower now 🙈 Although I would pick stability over performance in this case, but still.

Regarding randomly breaking tests, tell me about it... wants to make me give up on opening any new PRs.

packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx

LukasTy · 2025-01-30T10:10:45Z

Great work! Curiously though, the unit tests seem to run much slower now 🙈 Although I would pick stability over performance in this case, but still.

It could be due to a slower container. 🤔
The previous run was way quicker and quicker than the current median...
Or, setting config.disabled before every test might actually have a tangible performance drawback as compared to beforeAll... 🤷

github-actions · 2025-01-30T12:52:01Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

LukasTy · 2025-01-30T14:57:49Z

After merging with the latest master branch the CI seems stable and React 18 tests are passing. 🤔

packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx

Janpot

Looks good, but I'd do a separate PR to fix those act calls

…test.tsx Co-authored-by: Jan Potoms <[email protected]> Signed-off-by: Lukas Tyla <[email protected]>

LukasTy · 2025-01-31T12:14:49Z

@mui/xgrid should I wait for a review from you, given that test changes are in Grid packages? 🤔

…ui#16288) Signed-off-by: Lukas Tyla <[email protected]> Co-authored-by: Lukas <[email protected]> Co-authored-by: Jan Potoms <[email protected]>

override react transition group + remove waitFor calls

0c7316d

lauri865 changed the title ~~Draft: [tests] override react transition group~~ Draft: [tests] disable animations in unit testing Jan 21, 2025

LukasTy added 2 commits January 22, 2025 09:02

Install missing react-transition-group dep in test package

2f5117a

Always render the transition component - in as false should rende…

cfbdf4e

…r a hidden element

LukasTy added the test label Jan 22, 2025

LukasTy changed the title ~~Draft: [tests] disable animations in unit testing~~ [test] disable animations in unit testing Jan 22, 2025

LukasTy marked this pull request as draft January 22, 2025 07:03

LukasTy added 2 commits January 22, 2025 12:03

Fix eslint and prettier issues

73c71ba

Try built-in react-transition-group transition disabling for testing

5546f97

LukasTy reviewed Jan 22, 2025

View reviewed changes

test/utils/mochaHooks.js Outdated Show resolved Hide resolved

LukasTy added 2 commits January 23, 2025 10:34

Try mocking components instead of using config

583b078

prettier & eslint

1e8be24

Revert back to config.disabled = "true" solution

fd8dccd

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 27, 2025

LukasTy added 3 commits January 27, 2025 11:19

Override config flag for tests needing transitions

f30868b

Merge branch 'master' into override-react-transition-group-in-tests

88f8035

Use waitFor in relevant cases, where browser tests fail otherwise

e8a289f

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 27, 2025

LukasTy reviewed Jan 27, 2025

View reviewed changes

packages/x-data-grid/src/tests/rows.DataGrid.test.tsx Show resolved Hide resolved

LukasTy changed the title ~~[test] disable animations in unit testing~~ [test] Disable react-transition-group transitions in unit testing Jan 27, 2025

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 27, 2025

LukasTy added the scope: code-infra Specific to the core-infra product label Jan 29, 2025

LukasTy marked this pull request as ready for review January 29, 2025 12:21

LukasTy requested review from a team January 29, 2025 14:28

LukasTy added 2 commits January 29, 2025 17:57

Merge branch 'master' into override-react-transition-group-in-tests

8f2bff8

Move config to beforeEach

6cfb531

Janpot reviewed Jan 30, 2025

View reviewed changes

packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx Outdated Show resolved Hide resolved

Janpot reviewed Jan 30, 2025

View reviewed changes

packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx Outdated Show resolved Hide resolved

LukasTy added 2 commits January 30, 2025 12:55

Code review: Jan

4cac57d

A few flaky refactors

d92ea56

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 30, 2025

LukasTy added 3 commits January 30, 2025 14:55

Merge branch 'master' into override-react-transition-group-in-tests

018956e

Address another flaky test

6dc1330

Revert change

ee62e4d

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 30, 2025

LukasTy requested a review from Janpot January 30, 2025 14:57

Janpot reviewed Jan 30, 2025

View reviewed changes

packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx Outdated Show resolved Hide resolved

Janpot approved these changes Jan 30, 2025

View reviewed changes

Update packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.…

d05549a

…test.tsx Co-authored-by: Jan Potoms <[email protected]> Signed-off-by: Lukas Tyla <[email protected]>

LukasTy merged commit 804bb40 into mui:master Jan 31, 2025
18 checks passed

LukasTy mentioned this pull request Feb 3, 2025

[test] Fix flaky browser tests #16179

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[test] Disable `react-transition-group` transitions in unit testing #16288

[test] Disable `react-transition-group` transitions in unit testing #16288

lauri865 commented Jan 21, 2025 •

edited by LukasTy

Loading

mui-bot commented Jan 21, 2025 •

edited

Loading

LukasTy commented Jan 22, 2025

lauri865 commented Jan 22, 2025

LukasTy commented Jan 23, 2025

lauri865 commented Jan 23, 2025 •

edited

Loading

github-actions bot commented Jan 27, 2025

LukasTy Jan 27, 2025

LukasTy Jan 27, 2025

github-actions bot commented Jan 27, 2025

LukasTy commented Jan 29, 2025 •

edited

Loading

LukasTy commented Jan 30, 2025

lauri865 commented Jan 30, 2025 •

edited

Loading

LukasTy commented Jan 30, 2025

github-actions bot commented Jan 30, 2025

LukasTy commented Jan 30, 2025

Janpot left a comment

LukasTy commented Jan 31, 2025

[test] Disable react-transition-group transitions in unit testing #16288

[test] Disable react-transition-group transitions in unit testing #16288

Conversation

lauri865 commented Jan 21, 2025 • edited by LukasTy Loading

UPDATE (Lukas)

mui-bot commented Jan 21, 2025 • edited Loading

LukasTy commented Jan 22, 2025

lauri865 commented Jan 22, 2025

LukasTy commented Jan 23, 2025

lauri865 commented Jan 23, 2025 • edited Loading

github-actions bot commented Jan 27, 2025

LukasTy Jan 27, 2025

Choose a reason for hiding this comment

LukasTy Jan 27, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 27, 2025

LukasTy commented Jan 29, 2025 • edited Loading

LukasTy commented Jan 30, 2025

lauri865 commented Jan 30, 2025 • edited Loading

LukasTy commented Jan 30, 2025

github-actions bot commented Jan 30, 2025

LukasTy commented Jan 30, 2025

Janpot left a comment

Choose a reason for hiding this comment

LukasTy commented Jan 31, 2025

[test] Disable `react-transition-group` transitions in unit testing #16288

[test] Disable `react-transition-group` transitions in unit testing #16288

lauri865 commented Jan 21, 2025 •

edited by LukasTy

Loading

mui-bot commented Jan 21, 2025 •

edited

Loading

lauri865 commented Jan 23, 2025 •

edited

Loading

LukasTy commented Jan 29, 2025 •

edited

Loading

lauri865 commented Jan 30, 2025 •

edited

Loading