test: migrate test/unit/client/view to jest (#29992)

apps/meteor/.mocharc.client.js

@@ -32,5 +32,11 @@ module.exports = {
 	timeout: 5000,
 	exit: false,
 	slow: 200,
-	spec: ['tests/unit/client/**/*.spec.{ts,tsx}', 'tests/unit/lib/**/*.tests.ts', 'tests/unit/client/**/*.test.ts'],
+	spec: [
+		'tests/unit/client/sidebar/**/*.spec.{ts,tsx}',
+		'tests/unit/client/components/**/*.spec.{ts,tsx}',
+		'tests/unit/client/lib/**/*.spec.{ts,tsx}',
+		'tests/unit/lib/**/*.tests.ts',
+		'tests/unit/client/**/*.test.ts',
+	],
 };

apps/meteor/client/components/message/content/reactions/useToggleReactionMutation.spec.tsx

@@ -57,7 +57,7 @@ it('should be call rest `POST /v1/chat.react` method', async () => {
 		),
 	});
 
-	act(async () => {
+	await act(async () => {
 		await result.current.mutateAsync({ mid: 'MID', reaction: 'smile' });
 	});
 

apps/meteor/client/hooks/useAppUiKitInteraction.ts

@@ -12,7 +12,6 @@ export const useAppUiKitInteraction = (
 	) => void,
 ) => {
 	const notifyUser = useStream('notify-user');
-
 	const uid = useUserId();
 
 	useEffect(() => {

apps/meteor/jest.config.ts

@@ -3,7 +3,11 @@ export default {
 
 	testEnvironment: 'jsdom',
 	modulePathIgnorePatterns: ['<rootDir>/dist/'],
-	testMatch: ['<rootDir>/client/**/**.spec.[jt]s?(x)'],
+	testMatch: [
+		'<rootDir>/client/**/**.spec.[jt]s?(x)',
+		'<rootDir>/tests/unit/client/views/**/*.spec.{ts,tsx}',
+		'<rootDir>/tests/unit/client/providers/**/*.spec.{ts,tsx}',
+	],
 	transform: {
 		'^.+\\.(t|j)sx?$': '@swc/jest',
 	},

apps/meteor/package.json

@@ -39,7 +39,7 @@
 		"testapi": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha --config ./.mocharc.api.js",
 		"testunit": "npm run .testunit:definition && npm run .testunit:client && npm run .testunit:server",
 		".testunit:server": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha --config ./.mocharc.js",
-		".testunit:client": "jest && TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha --config ./.mocharc.client.js --exit",
+		".testunit:client": "jest --silent && TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha --config ./.mocharc.client.js --exit",
 		".testunit:definition": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha --config ./.mocharc.definition.js",
 		"testunit-watch": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha --watch --config ./.mocharc.js",
 		"test": "npm run testapi && npm run testui",

apps/meteor/tests/unit/client/providers/CallProvider/lib/parseStringToIceServers.spec.ts

-import { assert } from 'chai';
-
 import {
 	parseStringToIceServers,
 	parseStringToIceServer,
@@ -9,47 +7,47 @@ describe('parseStringToIceServers', () => {
 	describe('parseStringToIceServers', () => {
 		it('should parse return an empty array if string is empty', () => {
 			const result = parseStringToIceServers('');
-			assert.deepEqual(result, []);
+			expect(result).toEqual([]);
 		});
 		it('should parse string to servers', () => {
 			const servers = parseStringToIceServers('stun:stun.l.google.com:19302');
-			assert.equal(servers.length, 1);
-			assert.equal(servers[0].urls, 'stun:stun.l.google.com:19302');
-			assert.equal(servers[0].username, undefined);
-			assert.equal(servers[0].credential, undefined);
+			expect(servers.length).toEqual(1);
+			expect(servers[0].urls).toEqual('stun:stun.l.google.com:19302');
+			expect(servers[0].username).toEqual(undefined);
+			expect(servers[0].credential).toEqual(undefined);
 		});
 
 		it('should parse string to servers with multiple urls', () => {
 			const servers = parseStringToIceServers('stun:stun.l.google.com:19302,stun:stun1.l.google.com:19302');
-			assert.equal(servers.length, 2);
-			assert.equal(servers[0].urls, 'stun:stun.l.google.com:19302');
-			assert.equal(servers[1].urls, 'stun:stun1.l.google.com:19302');
+			expect(servers.length).toEqual(2);
+			expect(servers[0].urls).toEqual('stun:stun.l.google.com:19302');
+			expect(servers[1].urls).toEqual('stun:stun1.l.google.com:19302');
 		});
 
 		it('should parse string to servers with multiple urls, with password and username', () => {
 			const servers = parseStringToIceServers(
 				'stun:stun.l.google.com:19302,stun:stun1.l.google.com:19302,team%40rocket.chat:demo@turn:numb.viagenie.ca:3478',
 			);
-			assert.equal(servers.length, 3);
-			assert.equal(servers[0].urls, 'stun:stun.l.google.com:19302');
-			assert.equal(servers[1].urls, 'stun:stun1.l.google.com:19302');
-			assert.equal(servers[2].urls, 'turn:numb.viagenie.ca:3478');
-			assert.equal(servers[2].username, 'team@rocket.chat');
-			assert.equal(servers[2].credential, 'demo');
+			expect(servers.length).toEqual(3);
+			expect(servers[0].urls).toEqual('stun:stun.l.google.com:19302');
+			expect(servers[1].urls).toEqual('stun:stun1.l.google.com:19302');
+			expect(servers[2].urls).toEqual('turn:numb.viagenie.ca:3478');
+			expect(servers[2].username).toEqual('team@rocket.chat');
+			expect(servers[2].credential).toEqual('demo');
 		});
 	});
 
 	describe('parseStringToIceServer', () => {
 		it('should parse string to server', () => {
 			const server = parseStringToIceServer('stun:stun.l.google.com:19302');
-			assert.equal(server.urls, 'stun:stun.l.google.com:19302');
+			expect(server.urls).toEqual('stun:stun.l.google.com:19302');
 		});
 
 		it('should parse string to server with username and password', () => {
 			const server = parseStringToIceServer('team%40rocket.chat:demo@turn:numb.viagenie.ca:3478');
-			assert.equal(server.urls, 'turn:numb.viagenie.ca:3478');
-			assert.equal(server.username, 'team@rocket.chat');
-			assert.equal(server.credential, 'demo');
+			expect(server.urls).toEqual('turn:numb.viagenie.ca:3478');
+			expect(server.username).toEqual('team@rocket.chat');
+			expect(server.credential).toEqual('demo');
 		});
 	});
 });

apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx

 import { render, waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { expect } from 'chai';
-import { describe, it } from 'mocha';
+import '@testing-library/jest-dom';
 import type { MutableRefObject } from 'react';
 import React from 'react';
 
@@ -12,19 +11,23 @@ describe('views/notFound/NotFoundPage', () => {
 	it('should look good', async () => {
 		render(<NotFoundPage />);
 
-		expect(screen.getByText('Page_not_found')).to.exist;
-		expect(screen.getByText('Page_not_exist_or_not_permission')).to.exist;
-		expect(screen.getByRole('button', { name: 'Homepage' })).to.exist.and.to.not.match(':disabled');
+		await screen.findByRole('heading');
+
+		expect(screen.getByRole('heading')).toHaveTextContent('Page_not_found');
+
+		expect(screen.getByRole('button', { name: 'Homepage' })).not.toBeDisabled();
 	});
 
 	it('should have correct tab order', () => {
 		render(<NotFoundPage />);
-
-		expect(document.body).to.have.focus;
+		// eslint-disable-next-line testing-library/no-node-access
+		expect(document.activeElement).toBe(document.body);
 		userEvent.tab();
-		expect(screen.getByRole('button', { name: 'Homepage' })).to.have.focus;
+		// eslint-disable-next-line testing-library/no-node-access
+		expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Homepage' }));
 		userEvent.tab();
-		expect(document.body).to.have.focus;
+		// eslint-disable-next-line testing-library/no-node-access
+		expect(document.activeElement).toBe(document.body);
 	});
 
 	describe('"Return to home" button', () => {
@@ -41,7 +44,7 @@ describe('views/notFound/NotFoundPage', () => {
 
 				userEvent.click(button);
 
-				await waitFor(() => expect(currentPath.current).to.be.equal('/home'));
+				await waitFor(() => expect(currentPath.current).toBe('/home'));
 			});
 		});
 	});