fix: Fix jest (#945)

* bug: jest is now fixed

* chore: files are included for the eslint

* chore: build is fixed

* test: jest test are fixed

frontend/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	presets: [
+		['@babel/preset-env', { targets: { node: 'current' } }],
+		'@babel/preset-typescript',
+	],
+};

frontend/jest.config.ts

@@ -9,12 +9,19 @@ const config: Config.InitialOptions = {
 	moduleNameMapper: {
 		'\\.(css|less)$': '<rootDir>/__mocks__/cssMock.ts',
 	},
-	notify: true,
-	notifyMode: 'always',
-	testMatch: ['<rootDir>/src/**/?(*.)(test).(ts|js)?(x)'],
-	transform: {
-		'\\.(js|jsx|ts|tsx)?$': 'babel-jest',
+	globals: {
+		extensionsToTreatAsEsm: ['.ts'],
+		'ts-jest': {
+			useESM: true,
+		},
 	},
+	testMatch: ['<rootDir>/src/**/?(*.)(test).(ts|js)?(x)'],
+	preset: 'ts-jest/presets/js-with-ts-esm',
+	transform: {
+		'^.+\\.(ts|tsx)?$': 'ts-jest',
+		'^.+\\.(js|jsx)$': 'babel-jest',
+	},
+	transformIgnorePatterns: ['node_modules/(?!(lodash-es)/)'],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],

frontend/package.json

@@ -57,7 +57,7 @@
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
-		"jest": "26.6.0",
+		"jest": "^27.5.1",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
@@ -107,6 +107,7 @@
 		"@babel/preset-typescript": "^7.12.17",
 		"@jest/globals": "^27.5.1",
 		"@testing-library/cypress": "^8.0.0",
+		"@testing-library/react-hooks": "^7.0.2",
 		"@types/color": "^3.0.3",
 		"@types/compression-webpack-plugin": "^9.0.0",
 		"@types/copy-webpack-plugin": "^8.0.1",
@@ -155,6 +156,7 @@
 		"portfinder-sync": "^0.0.2",
 		"prettier": "2.2.1",
 		"react-hot-loader": "^4.13.0",
+		"ts-jest": "^27.1.4",
 		"ts-node": "^10.2.1",
 		"typescript-plugin-css-modules": "^3.4.0",
 		"webpack-bundle-analyzer": "^4.5.0",

frontend/src/components/NotFound/NotFound.test.tsx

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import { expect } from '@jest/globals';
 import { render } from '@testing-library/react';
 import React from 'react';

frontend/src/components/NotFound/__snapshots__/NotFound.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Not Found page test should render Not Found page without errors 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gtsrHT VomVY"
+    class="sc-gsDKAQ cLXpIa"
   >
     <svg
       fill="none"
@@ -272,21 +272,21 @@ exports[`Not Found page test should render Not Found page without errors 1`] = `
       </defs>
     </svg>
     <div
-      class="sc-hKFxyN dunFuJ"
+      class="sc-hKwDye foaleg"
     >
       <p
-        class="sc-dlnjwi cydxLA"
+        class="sc-dkPtRN fcyVIq"
       >
         Ah, seems like we reached a dead end!
       </p>
       <p
-        class="sc-dlnjwi cydxLA"
+        class="sc-dkPtRN fcyVIq"
       >
         Page Not Found
       </p>
     </div>
     <a
-      class="sc-bdnxRM bYqcho"
+      class="sc-bdvvtL dbTZkj"
       href="/application"
       tabindex="0"
     >

frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx

@@ -1,42 +1,51 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import { expect } from '@jest/globals';
 import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import TraceFlameGraph from 'container/TraceFlameGraph';
 import React, { useState } from 'react';
+import { Provider } from 'react-redux';
+import store from 'store';
 
 test('loads and displays greeting', () => {
-	const onSpanHover = useState('');
+	const { rerender } = renderHook(() => useState(''));
 
 	const { asFragment } = render(
-		<TraceFlameGraph
-			{...{
-				hoveredSpanId: '',
-				intervalUnit: { multiplier: 0, name: 'm' },
-				onSpanHover: onSpanHover[1],
-				onSpanSelect: (): void => {},
-				selectedSpanId: '',
-				traceMetaData: {
-					globalEnd: 0,
-					globalStart: 0,
-					levels: 0,
-					spread: 0,
-					totalSpans: 0,
-				},
-				treeData: {
-					children: [],
-					id: '',
-					name: '',
-					serviceColour: '',
-					serviceName: '',
-					startTime: 0,
-					tags: [],
-					time: 0,
-					value: 0,
-					event: [],
-					hasError: false,
-					parent: undefined,
-				},
-			}}
-		/>,
+		<Provider store={store}>
+			<TraceFlameGraph
+				{...{
+					hoveredSpanId: '',
+					intervalUnit: { multiplier: 0, name: 'm' },
+					onSpanHover: rerender,
+					onSpanSelect: (): void => {},
+					selectedSpanId: '',
+					traceMetaData: {
+						globalEnd: 0,
+						globalStart: 0,
+						levels: 0,
+						spread: 0,
+						totalSpans: 0,
+					},
+					treeData: {
+						children: [],
+						id: '',
+						name: '',
+						serviceColour: '#a0e',
+						serviceName: '',
+						startTime: 0,
+						tags: [],
+						time: 100,
+						value: 100,
+						event: [],
+						hasError: false,
+						parent: undefined,
+					},
+				}}
+			/>
+		</Provider>,
 	);
 	expect(asFragment()).toMatchSnapshot();
 });

frontend/src/container/TraceFlameGraph/__tests__/__snapshots__/TraceFlameGraph.test.tsx.snap

@@ -1,3 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`loads and displays greeting 1`] = `<DocumentFragment />`;
+exports[`loads and displays greeting 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gsDKAQ jFDWPs"
+    height="0"
+  >
+    <div
+      class="sc-bdvvtL fyFVjh"
+      title="
+0 m"
+      width="Infinity"
+    />
+  </div>
+</DocumentFragment>
+`;

frontend/tsconfig.json

@@ -22,5 +22,5 @@
 		"plugins": [{ "name": "typescript-plugin-css-modules" }]
 	},
 	"exclude": ["node_modules"],
-	"include": ["./src"]
+	"include": ["./src", "./babel.config.js", "./jest.config.ts"]
 }