use testing-library (#216)

Author: jonenst

package-lock.json

@@ -79,6 +79,7 @@
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",
         "@react-hook/window-size": "^3.1.1",
+        "@testing-library/react": "^16.0.0",
         "@types/autosuggest-highlight": "^3.2.3",
         "@types/eslint": "^8.56.7",
         "@types/eslint-config-prettier": "^6.11.3",

package.json

@@ -5,31 +5,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
+import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 
 import { red } from '@mui/material/colors';
 import { createTheme, ThemeProvider } from '@mui/material';
-import { afterEach, beforeEach, expect, it } from '@jest/globals';
+import { expect, it } from '@jest/globals';
 import TopBar, { LANG_ENGLISH } from './TopBar';
 import { CommonMetadata, top_bar_en } from '../..';
 
 import PowsyblLogo from '../images/powsybl_logo.svg?react';
 
-let container: Element;
-
-beforeEach(() => {
-    // setup a DOM element as a render target
-    container = document.createElement('div');
-    document.body.appendChild(container);
-});
-
-afterEach(() => {
-    // cleanup on exiting
-    container?.remove();
-});
-
 const apps: CommonMetadata[] = [
     {
         name: 'App1',
@@ -54,50 +40,44 @@ const theme = createTheme({
 });
 
 it('renders', () => {
-    const root = createRoot(container);
-    act(() => {
-        root.render(
-            <ThemeProvider theme={theme}>
-                <IntlProvider locale="en" messages={top_bar_en}>
-                    <TopBar
-                        appName="Demo"
-                        appColor="#808080"
-                        appLogo={<PowsyblLogo />}
-                        onParametersClick={() => {}}
-                        onLogoutClick={() => {}}
-                        onLogoClick={() => {}}
-                        user={{
-                            profile: {
-                                name: 'John Doe',
-                                iss: 'issuer',
-                                sub: 'sub',
-                                aud: 'aud',
-                                exp: 213443,
-                                iat: 3214324,
-                            },
-                            id_token: 'id_token',
-                            access_token: 'access_token',
-                            token_type: 'code',
-                            scope: 'scope',
-                            expires_at: 123343,
-                            scopes: ['code', 'token'],
-                            expired: false,
-                            state: null,
-                            toStorageString: () => 'stored',
-                            expires_in: 1232,
-                        }}
-                        appsAndUrls={apps}
-                        language={LANG_ENGLISH}
-                        onLanguageClick={() => {}}
-                    >
-                        <p>testchild</p>
-                    </TopBar>
-                </IntlProvider>
-            </ThemeProvider>
-        );
-    });
+    const { container } = render(
+        <ThemeProvider theme={theme}>
+            <IntlProvider locale="en" messages={top_bar_en}>
+                <TopBar
+                    appName="Demo"
+                    appColor="#808080"
+                    appLogo={<PowsyblLogo />}
+                    onParametersClick={() => {}}
+                    onLogoutClick={() => {}}
+                    onLogoClick={() => {}}
+                    user={{
+                        profile: {
+                            name: 'John Doe',
+                            iss: 'issuer',
+                            sub: 'sub',
+                            aud: 'aud',
+                            exp: 213443,
+                            iat: 3214324,
+                        },
+                        id_token: 'id_token',
+                        access_token: 'access_token',
+                        token_type: 'code',
+                        scope: 'scope',
+                        expires_at: 123343,
+                        scopes: ['code', 'token'],
+                        expired: false,
+                        state: null,
+                        toStorageString: () => 'stored',
+                        expires_in: 1232,
+                    }}
+                    appsAndUrls={apps}
+                    language={LANG_ENGLISH}
+                    onLanguageClick={() => {}}
+                >
+                    <p>testchild</p>
+                </TopBar>
+            </IntlProvider>
+        </ThemeProvider>
+    );
     expect(container.textContent).toContain('GridDemotestchildJD');
-    act(() => {
-        root.unmount();
-    });
 });