test: correction and improvement of unit tests in CI (#5591)

.circleci/config.yml

@@ -404,7 +404,7 @@ jobs:
       - run:
           name: Test
           command: |
-            yarn test -w 8
+            yarn test --runInBand
 
       - run:
           name: Codecov

app/views/CreateChannelView/RoomSettings/SwitchItemEncrypted.test.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
-import { Provider } from 'react-redux';
 
-import { SwitchItemEncrypted, ISwitchItemEncrypted } from './SwitchItemEncrypted';
-import { mockedStore as store } from '../../../reducers/mockedStore';
 import i18n from '../../../i18n';
+import { SwitchItemEncrypted } from './SwitchItemEncrypted';
 
 const onPressMock = jest.fn((value: boolean) => value);
 
-const testEncrypted = {
+describe('SwitchItemEncrypted', () => {
+	const testEncrypted = {
 		encrypted: false,
 		encryptionEnabled: false,
 		isTeam: false,
@@ -16,24 +15,11 @@ const testEncrypted = {
 		type: false,
 		testSwitchID: 'create-channel-encrypted',
 		testLabelID: `create-channel-encrypted-hint`
-};
+	};
 
-const Render = ({ encrypted, encryptionEnabled, isTeam, onValueChangeEncrypted, type }: ISwitchItemEncrypted) => (
+	it('should not render the Encrypted Switch component', () => {
-	<Provider store={store}>
+		render(
 			<SwitchItemEncrypted
-			encrypted={encrypted}
-			encryptionEnabled={encryptionEnabled}
-			isTeam={isTeam}
-			onValueChangeEncrypted={onValueChangeEncrypted}
-			type={type}
-		/>
-	</Provider>
-);
-
-describe('SwitchItemEncrypted', () => {
-	it('should not render the Encrypted Switch component', async () => {
-		const { findByTestId } = render(
-			<Render
 				encrypted={testEncrypted.encrypted}
 				encryptionEnabled={testEncrypted.encryptionEnabled}
 				isTeam={testEncrypted.isTeam}
@@ -41,16 +27,14 @@ describe('SwitchItemEncrypted', () => {
 				type={testEncrypted.type}
 			/>
 		);
-		try {
+		const component = screen.queryByTestId(testEncrypted.testSwitchID);
-			await findByTestId(testEncrypted.testSwitchID);
+		expect(component).toBeNull();
-		} catch (e) {
-			expect(e).toBeTruthy();
-		}
 	});
-	it('should render the Encrypted Switch component', async () => {
+
+	it('should render the Encrypted Switch component', () => {
 		testEncrypted.encryptionEnabled = true;
-		const { findByTestId } = render(
+		render(
-			<Render
+			<SwitchItemEncrypted
 				encrypted={testEncrypted.encrypted}
 				encryptionEnabled={testEncrypted.encryptionEnabled}
 				isTeam={testEncrypted.isTeam}
@@ -58,12 +42,13 @@ describe('SwitchItemEncrypted', () => {
 				type={testEncrypted.type}
 			/>
 		);
-		const component = await findByTestId(testEncrypted.testSwitchID);
+		const component = screen.queryByTestId(testEncrypted.testSwitchID);
 		expect(component).toBeTruthy();
 	});
-	it('should change value of switch', async () => {
+	
-		const { findByTestId } = render(
+	it('should change value of switch', () => {
-			<Render
+		render(
+			<SwitchItemEncrypted
 				encrypted={testEncrypted.encrypted}
 				encryptionEnabled={testEncrypted.encryptionEnabled}
 				isTeam={testEncrypted.isTeam}
@@ -71,14 +56,16 @@ describe('SwitchItemEncrypted', () => {
 				type={testEncrypted.type}
 			/>
 		);
-
+		const component = screen.queryByTestId(testEncrypted.testSwitchID);
-		const component = await findByTestId(testEncrypted.testSwitchID);
+		if (component) {
 			fireEvent(component, 'valueChange', { value: true });
 			expect(onPressMock).toHaveReturnedWith({ value: !testEncrypted.encrypted });
+		}
 	});
-	it('label when encrypted and isTeam are false and is a public channel', async () => {
+	
-		const { findByTestId } = render(
+	it('label when encrypted and isTeam are false and is a public channel', () => {
-			<Render
+		render(
+			<SwitchItemEncrypted
 				encrypted={testEncrypted.encrypted}
 				encryptionEnabled={testEncrypted.encryptionEnabled}
 				isTeam={testEncrypted.isTeam}
@@ -86,15 +73,16 @@ describe('SwitchItemEncrypted', () => {
 				type={testEncrypted.type}
 			/>
 		);
-		const component = await findByTestId(testEncrypted.testLabelID);
+		const component = screen.queryByTestId(testEncrypted.testLabelID);
-		expect(component.props.children).toBe(i18n.t('Channel_hint_encrypted_not_available'));
+		expect(component?.props.children).toBe(i18n.t('Channel_hint_encrypted_not_available'));
 	});
-	it('label when encrypted and isTeam are true and is a private team', async () => {
+	
+	it('label when encrypted and isTeam are true and is a private team', () => {
 		testEncrypted.isTeam = true;
 		testEncrypted.type = true;
 		testEncrypted.encrypted = true;
-		const { findByTestId } = render(
+		render(
-			<Render
+			<SwitchItemEncrypted
 				encrypted={testEncrypted.encrypted}
 				encryptionEnabled={testEncrypted.encryptionEnabled}
 				isTeam={testEncrypted.isTeam}
@@ -102,7 +90,7 @@ describe('SwitchItemEncrypted', () => {
 				type={testEncrypted.type}
 			/>
 		);
-		const component = await findByTestId(testEncrypted.testLabelID);
+		const component = screen.queryByTestId(testEncrypted.testLabelID);
-		expect(component.props.children).toBe(i18n.t('Team_hint_encrypted'));
+		expect(component?.props.children).toBe(i18n.t('Team_hint_encrypted'));
 	});
 });

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+	testPathIgnorePatterns: ['e2e', 'node_modules'],
+	transformIgnorePatterns: [
+		'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)'
+	],
+	preset: './jest.preset.js',
+	coverageDirectory: './coverage/',
+	collectCoverage: true,
+	moduleNameMapper: {
+		'.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
+		'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js'
+	},
+	setupFilesAfterEnv: ['./jest.setup.js']
+};

jest.setup.js

@@ -1,3 +1,6 @@
+// https://github.com/facebook/react/issues/20756#issuecomment-780927519
+import 'react-16-node-hanging-test-fix';
+
 import React from 'react';
 import '@testing-library/react-native/extend-expect';
 import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock.js';

package.json

@@ -148,7 +148,7 @@
 		"use-debounce": "^8.0.4",
 		"use-deep-compare-effect": "1.6.1",
 		"xregexp": "5.0.2",
-		"yup": "^0.32.11"
+		"yup": "0.32.11"
 	},
 	"resolutions": {
 		"ua-parser-js": "^1.0.2",
@@ -210,6 +210,7 @@
 		"otp.js": "1.2.0",
 		"patch-package": "8.0.0",
 		"prettier": "^2.3.2",
+		"react-16-node-hanging-test-fix": "^1.0.0",
 		"react-dom": "17.0.1",
 		"react-native-dotenv": "3.4.8",
 		"react-test-renderer": "17.0.2",
@@ -218,25 +219,6 @@
 		"ts-node": "^10.9.1",
 		"typescript": "^4.3.5"
 	},
-	"jest": {
-		"testPathIgnorePatterns": [
-			"e2e",
-			"node_modules"
-		],
-		"transformIgnorePatterns": [
-			"node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
-		],
-		"preset": "./jest.preset.js",
-		"coverageDirectory": "./coverage/",
-		"collectCoverage": true,
-		"moduleNameMapper": {
-			".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
-			".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
-		},
-		"setupFilesAfterEnv": [
-			"./jest.setup.js"
-		]
-	},
 	"jest-junit": {
 		"addFileAttribute": "true"
 	},

patches/react-16-node-hanging-test-fix+1.0.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-16-node-hanging-test-fix/index.js b/node_modules/react-16-node-hanging-test-fix/index.js
+index 4a3b342..442eef1 100644
+--- a/node_modules/react-16-node-hanging-test-fix/index.js
++++ b/node_modules/react-16-node-hanging-test-fix/index.js
+@@ -16,7 +16,7 @@ if (Object.prototype.toString.call(process) !== '[object process]') {
+   );
+ }
+ 
+-if (semverGt(version, '17.0.1')) {
++if (semverGt(version, '17.0.2')) {
+   console.error(
+     'The `react-16-node-hanging-test-fix` package is no longer needed ' +
+     'with React ' + version + ' and may cause issues. Remove this import.'

yarn.lock

@@ -17559,6 +17559,13 @@ rc@~1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-16-node-hanging-test-fix@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-16-node-hanging-test-fix/-/react-16-node-hanging-test-fix-1.0.0.tgz#9fef3f7d983789d64971311d3cd17116849a56b3"
+  integrity sha512-D22iNNa+0MuMPA49nZ5ILBHiJ7h9PTeUUuZee38pFSEWlHOYnHEWzUjOlYjEo6Ji+axHrRnT+y1QRIJOcIcj4w==
+  dependencies:
+    semver "^7.3.4"
+
 react-colorful@^5.1.2:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.0.tgz#1394165de401265d36a809a7ac87c910fad36837"
@@ -21763,7 +21770,7 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yup@^0.32.11:
+yup@0.32.11:
   version "0.32.11"
   resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
   integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==