[core] Update tooling to run with React 18

[m4theushw]

This PR updates the React version in all package.json to v18.x. As consequence, I had to update a bunch of tests to work in this version without warnings. I noticed 3 types of change it caused:

• API calls now need to be wrapped in act to avoid warnings like

  Warning: An update to ForwardRef(DataGridPro) inside a test was not wrapped in act(...)

  Basically we only need to do:

  -apiRef.current.setFilterModel(...);
  +act(() => apiRef.current.setFilterModel(...));

  But it can get complex if the update happens inside a Promise so https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning may help.

• When doing expect().toErrorDev([...]) we need to duplicate the first message.

  Now the errors generated by StrictMode are also sent to console.error. In React 17, the 2nd render made by StrictMode replaced console.error with a no-op version.

   expect(() => {
     render(
       <ErrorBoundary>
         <GridOverlay />
       </ErrorBoundary>,
     );
   }).toErrorDev([
     'MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.',
  +  'MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.',
     'The above error occurred in the <ForwardRef(GridOverlay)> component',
   ]);

• When asserting that something was called X times, and one of the times was caused by an effect, we need to account for StrictEffects

  Each effect runs twice so the expectation has to consider that.

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	246.4	500.4	329.6	342.98	92.151
Sort 100k rows	ms	492	912.4	806.7	747.98	161.107
Select 100k rows	ms	206.9	315.5	261.6	258.36	44.913
Deselect 100k rows	ms	151.3	431.1	227.9	273.26	102.346

Generated by 🚫 dangerJS against 51e5822

[alexfauquette]

I don't understand why some lines bellow you use

await act(() => clock.tick(500))

and here you can simply keep

clock.tick(500)

---

About await act(() => Promise.resolve()); would it make sense to create an helper

waitForTimeoutExecution = async () => act(() => Promise.resolve());

such that when reading the code await waitForTimeoutExecution() bring more information

[m4theushw]

Which line you're referring to? Note that the tests for the old editing API have some useless code, like waitFor being used with fake timers = no difference.

About the helper, we could add it but only waiting for the promise is not enough for "timeout completion". If the clock is fake, the time has to be manually advanced too.

[alexfauquette]

Was looking at lin 240 await act(async () => clock.tick(500));

[m4theushw]

I reviewed this entire file removing useless code. Now most tests use only clock.tick(500) or clock.tick(500) + await act(() => Promise.resolve());.

[DanailH]

Should this be also wrapped in an act? There is one more case couple of lines below.

[m4theushw]

I removed the second one. It was doing nothing.