Chore: Upgrade to react 18 #64428
Chore: Upgrade to react 18 #64428
Conversation
| @@ -114,10 +114,9 @@ | |||
| "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1", | |||
| "@swc/core": "1.3.38", | |||
| "@swc/helpers": "0.4.14", | |||
| "@testing-library/dom": "8.20.0", | |||
| "@testing-library/dom": "9.0.1", | |||
There was a problem hiding this comment.
RTL is built on top testing-library/dom, so should include all its functions. I quickly checked our codebase and it seems like we use testing-library/dom mostly for the within function, which is also available from testing-library/react. Should we try to remove this package?
There was a problem hiding this comment.
ok so i've changed the instances of the code that are using within/fireEvent from @testing-library/dom directly to instead use the methods from @testing-library/react, however i don't think we can remove the package itself as @testing-library/user-event declares a peer dependency on it.
There was a problem hiding this comment.
I think @testing-library/react should pull it in as a dependency? Also found an issue where it says that @testing-library/dom shouldn't be listed as dependency unless used directly.
There was a problem hiding this comment.
it does, but that will still leave us with warnings when yarn installing:
➤ YN0002: │ grafana@workspace:. doesn't provide @testing-library/dom (p15dc6), requested by @testing-library/user-event
there's another issue here saying that installing it directly is the correct approach when using @testing-library/user-event.
* update react 18 related deps * fix some types * make sure we're on react-router-dom >= 5.3.3 * Use new root API * Remove StrictMode for now - react 18 double rendering causes issues * fix + ignore some @grafana/ui types * fix some more types * use renderHook from @testing-library/react in almost all cases * fix storybook types * rewrite useDashboardSave to not use useEffect * make props optional * only render if props are provided * add correct type for useCallback * make resourcepicker tests more robust * fix ModalManager rendering * fix some more unit tests * store the click coordinates in a ref as setState is NOT synchronous * fix remaining e2e tests * rewrite dashboardpage tests to avoid act warnings * undo lint ignores * fix ExpanderCell types * set SymbolCell type correctly * fix QueryAndExpressionsStep * looks like the types were actually wrong instead :D * undo this for now... * remove spinner waits * more robust tests * rewrite errorboundary test to not explicitly count the number of renders * make urlParam expect async * increase timeout in waitFor * revert ExplorePage test changes * Update public/app/features/dashboard/containers/DashboardPage.test.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update public/app/features/dashboard/containers/PublicDashboardPage.test.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update public/app/features/dashboard/containers/PublicDashboardPage.test.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update public/app/features/dashboard/containers/PublicDashboardPage.test.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * skip fakeTimer test, ignore table types for now + other review comments * update package peerDeps * small tweak to resourcepicker test * update lockfile... * increase timeout in sharepublicdashboard tests * ensure ExplorePaneContainer passes correct queries to initializeExplore * fix LokiContextUI test * fix unit tests * make importDashboard flow more consistent * wait for dashboard name before continuing * more test fixes * readd dashboard name to variable e2e tests * wait for switches to be enabled before clicking * fix modal rendering * don't use @testing-library/dom directly * quick fix for rendering of panels in firefox * make PromQueryField test more robust * don't wait for chartData - in react 18 this can happen before the wait code even gets executed --------- Co-authored-by: kay delaney <kay@grafana.com> Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
What is this feature?
react,react-dom,@testing-library/dom,@testing-library/reactandreact-test-rendererto latest versions supporting react 18<StrictMode>wrapping around the whole app.StrictModeis much stricter in react 18.testing-library/react-hooksand replaces with the samerenderHookmethod now exposed in@testing-library/react, as recommended in the migration guide@storybook/addon-docsandreact-split-paneto add thechildrenprop to some components that were usingReact.FCinternally.renderOrCallToRendernow requires props be passed when using the function variety. even if those props are{}.DashboardPage.test.tsx/PublicDashboardPage.test.tsxto be structured more like a regular RTL test.actwarnings (cc @torkelo , i know you like the previous style, maybe you can find a way 🤞 ).actwarnings that doesn't play nicely with the structure these tests used.Why do we need this feature?
Who is this feature for?
Which issue(s) does this PR fix?:
Fixes #
Special notes for your reviewer:
Release notice breaking change
Grafana has been upgraded to React 18 and now leverages the new React client rendering API. Plugin authors in particular should be aware, as there could be unintended side effects due to the changes around automatic batching of state updates and consistent
useEffecttimings. Be sure to test your plugins and reference the React 18 upgrade docs here: https://react.dev/blog/2022/03/08/react-18-upgrade-guide