Upgrade Testing Library

apps/meteor/client/portals/ModalPortal.tsx

@@ -1,5 +1,5 @@
-import type { ReactElement, ReactNode } from 'react';
-import React, { memo, useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { createAnchor } from '../lib/utils/createAnchor';
@@ -9,10 +9,19 @@ type ModalPortalProps = {
 	children?: ReactNode;
 };
 
-const ModalPortal = ({ children }: ModalPortalProps): ReactElement => {
-	const [modalRoot] = useState(() => createAnchor('modal-root'));
-	useEffect(() => (): void => deleteAnchor(modalRoot), [modalRoot]);
-	return <>{createPortal(children, modalRoot)}</>;
+const ModalPortal = ({ children }: ModalPortalProps) => {
+	const [modalRoot, setModalRoot] = useState<HTMLElement>();
+
+	useEffect(() => {
+		const modalRoot = createAnchor('modal-root');
+		setModalRoot(modalRoot);
+
+		return () => deleteAnchor(modalRoot);
+	}, []);
+
+	if (!modalRoot) return null;
+
+	return createPortal(children, modalRoot);
 };
 
 export default memo(ModalPortal);

apps/meteor/client/providers/ModalProvider/ModalProvider.spec.tsx

@@ -1,10 +1,8 @@
-// import type { IMessage } from '@rocket.chat/core-typings';
 import { Emitter } from '@rocket.chat/emitter';
 import { useSetModal } from '@rocket.chat/ui-contexts';
 import { render, screen } from '@testing-library/react';
-import { expect } from 'chai';
 import type { ReactNode } from 'react';
-import React, { Suspense, createContext, useContext, useEffect } from 'react';
+import React, { act, Suspense, createContext, useContext, useEffect } from 'react';
 
 import GenericModal from '../../components/GenericModal';
 import { imperativeModal } from '../../lib/imperativeModal';
@@ -19,13 +17,15 @@ const TestModal = ({ emitterEvent, modalFunc }: { emitterEvent: string; modalFun
 	const setModal = useSetModal();
 	const { title } = useContext(TestContext);
 
-	useEffect(() => {
-		emitter.on(emitterEvent, () => {
-			setModal(modalFunc || <GenericModal title={title} onClose={() => undefined} />);
-		});
-	}, [emitterEvent, setModal, title, modalFunc]);
+	useEffect(
+		() =>
+			emitter.on(emitterEvent, () => {
+				setModal(modalFunc || <GenericModal title={title} onClose={() => undefined} />);
+			}),
+		[emitterEvent, setModal, title, modalFunc],
+	);
 
-	return <></>;
+	return null;
 };
 
 describe('Modal Provider', () => {
@@ -37,8 +37,10 @@ describe('Modal Provider', () => {
 				</ModalProviderWithRegion>
 			</Suspense>,
 		);
-		emitter.emit('open');
-		expect(await screen.findByText('default')).to.exist;
+
+		act(() => emitter.emit('open'));
+
+		expect(await screen.findByText('default')).toBeInTheDocument();
 	});
 
 	it('should render a modal that is passed as a function', async () => {
@@ -49,8 +51,10 @@ describe('Modal Provider', () => {
 				</ModalProviderWithRegion>
 			</Suspense>,
 		);
-		emitter.emit('open');
-		expect(await screen.findByText('function modal')).to.exist;
+
+		act(() => emitter.emit('open'));
+
+		expect(await screen.findByText('function modal')).toBeInTheDocument();
 	});
 
 	it('should render a modal through imperative modal', () => {
@@ -68,11 +72,11 @@ describe('Modal Provider', () => {
 				props: { title: 'imperativeModal' },
 			});
 
-			expect(await screen.findByText('imperativeModal')).to.exist;
+			expect(await screen.findByText('imperativeModal')).toBeInTheDocument();
 
 			close();
 
-			expect(screen.queryByText('imperativeModal')).to.not.exist;
+			expect(screen.queryByText('imperativeModal')).not.toBeInTheDocument();
 		};
 	});
 
@@ -85,31 +89,37 @@ describe('Modal Provider', () => {
 			</Suspense>,
 		);
 
-		imperativeModal.open({
-			component: GenericModal,
-			props: { title: 'imperativeModal' },
-		});
+		act(() =>
+			imperativeModal.open({
+				component: GenericModal,
+				props: { title: 'imperativeModal' },
+			}),
+		);
 
-		expect(screen.queryByText('imperativeModal')).to.not.exist;
+		expect(screen.queryByText('imperativeModal')).not.toBeInTheDocument();
 	});
 
-	it('should render a modal in another region', () => {
+	it('should render a modal in another region', async () => {
 		render(
 			<TestContext.Provider value={{ title: 'modal1' }}>
-				<ModalProviderWithRegion>
-					<TestModal emitterEvent='openModal1' />
-				</ModalProviderWithRegion>
-				<TestContext.Provider value={{ title: 'modal2' }}>
+				<Suspense fallback={null}>
 					<ModalProviderWithRegion>
-						<TestModal emitterEvent='openModal2' />
+						<TestModal emitterEvent='openModal1' />
 					</ModalProviderWithRegion>
+				</Suspense>
+				<TestContext.Provider value={{ title: 'modal2' }}>
+					<Suspense fallback={null}>
+						<ModalProviderWithRegion>
+							<TestModal emitterEvent='openModal2' />
+						</ModalProviderWithRegion>
+					</Suspense>
 				</TestContext.Provider>
 			</TestContext.Provider>,
 		);
 
-		emitter.emit('openModal1');
-		expect(screen.getByText('modal1')).to.exist;
-		emitter.emit('openModal2');
-		expect(screen.getByText('modal2')).to.exist;
+		await act(async () => emitter.emit('openModal1'));
+		await expect(screen.findByText('modal1')).resolves.toBeInTheDocument();
+		await act(async () => emitter.emit('openModal2'));
+		await expect(screen.findByText('modal2')).resolves.toBeInTheDocument();
 	});
 });

apps/meteor/client/views/modal/ModalRegion.tsx

@@ -1,13 +1,12 @@
 import { useModal, useCurrentModal } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import React, { lazy, useCallback } from 'react';
 
 import ModalBackdrop from '../../components/ModalBackdrop';
 import ModalPortal from '../../portals/ModalPortal';
 
 const FocusScope = lazy(() => import('react-aria').then((module) => ({ default: module.FocusScope })));
 
-const ModalRegion = (): ReactElement | null => {
+const ModalRegion = () => {
 	const currentModal = useCurrentModal();
 	const { setModal } = useModal();
 	const handleDismiss = useCallback(() => setModal(null), [setModal]);

apps/meteor/jest.config.ts

@@ -1,6 +1,6 @@
 import type { Config } from 'jest';
 
-const config: Config = {
+export default {
 	projects: [
 		{
 			displayName: 'client',
@@ -24,6 +24,7 @@ const config: Config = {
 				'^@tanstack/(.+)': '<rootDir>/node_modules/@tanstack/$1',
 				'^meteor/(.*)': '<rootDir>/.meteorMocks/index.ts',
 			},
+			setupFilesAfterEnv: ['@testing-library/jest-dom'],
 		},
 		{
 			displayName: 'server',
@@ -51,6 +52,4 @@ const config: Config = {
 		},
 	],
 	collectCoverage: true,
-};
-
-export default config;
+} satisfies Config;

apps/meteor/package.json

@@ -88,7 +88,7 @@
 		"@swc/core": "^1.3.95",
 		"@swc/jest": "^0.2.29",
 		"@tanstack/react-query-devtools": "^4.19.1",
-		"@testing-library/react": "~12.1.5",
+		"@testing-library/react": "~14.3.1",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "~13.5.0",
 		"@types/adm-zip": "^0.5.3",

ee/packages/pdf-worker/package.json

@@ -5,8 +5,8 @@
 	"devDependencies": {
 		"@storybook/addon-essentials": "~6.5.16",
 		"@storybook/react": "~6.5.16",
-		"@testing-library/jest-dom": "^5.16.5",
-		"@testing-library/react": "~13.4.0",
+		"@testing-library/jest-dom": "~6.4.5",
+		"@testing-library/react": "~14.3.1",
 		"@types/emojione": "^2.2.8",
 		"@types/jest": "~29.5.7",
 		"@types/react-dom": "~18.3.0",

ee/packages/pdf-worker/src/worker.spec.ts

@@ -1,5 +1,3 @@
-import fs from 'fs';
-
 import { PdfWorker } from './index';
 import {
 	bigConversationData,
@@ -51,7 +49,6 @@ describe('PdfWorker', () => {
 		const stream = await pdfWorker.renderToStream({ data: dataWithASingleMessageAndAnImage });
 		const buffer = await streamToBuffer(stream);
 
-		fs.writeFileSync('test.pdf', buffer);
 		expect(buffer).toBeTruthy();
 	});
 

package.json

@@ -19,7 +19,7 @@
 		"@changesets/cli": "^2.26.2",
 		"@types/chart.js": "^2.9.39",
 		"@types/js-yaml": "^4.0.8",
-		"turbo": "^1.12.4"
+		"turbo": "latest"
 	},
 	"workspaces": [
 		"apps/*",
@@ -63,8 +63,7 @@
 		"mongodb@^4.17.1": "patch:mongodb@npm:4.17.1#.yarn/patches/mongodb-npm-4.17.1-a2fe811ff1.patch",
 		"@rocket.chat/forked-matrix-sdk-crypto-nodejs": "0.1.0-beta.13",
 		"[email protected]": "patch:typia@npm:5.3.3#.yarn/patches/typia-npm-5.3.3-21d3e18463.patch",
-		"typia@~5.3.3": "patch:typia@npm%3A5.3.3#./.yarn/patches/typia-npm-5.3.3-21d3e18463.patch",
-		"@types/react": "18.2.79"
+		"typia@~5.3.3": "patch:typia@npm%3A5.3.3#./.yarn/patches/typia-npm-5.3.3-21d3e18463.patch"
 	},
 	"dependencies": {
 		"node-gyp": "^9.4.1"

packages/fuselage-ui-kit/package.json

@@ -82,7 +82,7 @@
     "@storybook/source-loader": "~6.5.16",
     "@storybook/theming": "~6.5.16",
     "@tanstack/react-query": "^4.16.1",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "~14.3.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/babel__core": "^7.20.3",
     "@types/babel__preset-env": "^7.9.4",

packages/gazzodown/package.json

@@ -23,8 +23,8 @@
 		"@storybook/testing-library": "~0.0.13",
 		"@swc/core": "^1.3.95",
 		"@swc/jest": "^0.2.29",
-		"@testing-library/jest-dom": "^5.16.5",
-		"@testing-library/react": "~12.1.5",
+		"@testing-library/jest-dom": "~6.4.5",
+		"@testing-library/react": "~14.3.1",
 		"@types/jest": "~29.5.7",
 		"@types/katex": "~0.16.5",
 		"@types/react": "~18.3.2",

packages/ui-client/jest.config.ts

@@ -23,5 +23,5 @@ export default {
 	},
 	collectCoverage: true,
 	collectCoverageFrom: ['src/**/*.{ts,tsx}'],
-	setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+	setupFilesAfterEnv: ['@testing-library/jest-dom'],
 };

packages/ui-client/package.json

@@ -22,8 +22,8 @@
 		"@storybook/react": "~6.5.16",
 		"@storybook/testing-library": "~0.0.13",
 		"@swc/jest": "^0.2.29",
-		"@testing-library/jest-dom": "~5.16.5",
-		"@testing-library/react": "^12.1.5",
+		"@testing-library/jest-dom": "~6.4.5",
+		"@testing-library/react": "~14.3.1",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@types/babel__core": "~7.20.3",
 		"@types/jest": "~29.5.7",

packages/web-ui-registration/package.json

@@ -35,7 +35,7 @@
 		"@storybook/react": "~6.5.16",
 		"@storybook/testing-library": "^0.2.2",
 		"@tanstack/react-query": "^4.16.1",
-		"@testing-library/react": "^13.3.0",
+		"@testing-library/react": "~14.3.1",
 		"@types/jest": "~29.5.7",
 		"@types/react": "~18.3.2",
 		"babel-loader": "~8.3.0",