Ako/ RTL and Jest improvements (deriv-com#4211)

* input id's added to make html's for(htmlFor) attribute work.

* JEST todo's added for personal details component different landings

* redundant text removed

* Extra jest/react-testing-library added functionalities added

* Jest base configuration moved to root level package

* Simple tests written for personal details form

* Personal details test todos updated

* package lock updated

* comments added to setupTests

* comments added to setupTests files

* redundant test todos removed

* all of package-lock.json files regenerated

* Revert "all of package-lock.json files regenerated"

This reverts commit 0dcb670.

* package-locks regenerated

* Revert "package-locks regenerated"

This reverts commit a368e55.

* package-locks regenerated again

* unchanged package-lock change reverted.

* useless jest config removed

* nit space removed from package.json

* package-lock reverted

* package locks removed

* CssMinimizerPlugin used instead of OptimizeCssAssetsPlugin

* copyWebpackPlugin configurations improved

* CssMinimizerPlugin used to support webpack 5

* packages updated to satisfy new node14.17.1 needs also smartcharts updated to latest version

* package-locks of packages removed and root repo package-lock updated.

* core package webpack config updated.

* e2e tests package-lock regenerated

* packages version inconsistency fixed

* copyWebpackPlugin configuration improved

* smartcharts chunk config problem fixed

* Merge branch 'update-node-npm-webpack-to-latest-version' into RTL-and-jest-configs-improvements

# Conflicts:
#	package-lock.json
#	package.json
#	packages/account/package.json
#	packages/dashboard/package-lock.json
#	packages/indicators/package-lock.json
#	packages/p2p/package-lock.json
#	packages/shared/package-lock.json

* react and react-dom added to root package for testing library

* chore: revert unwanted changes

* chore: revert unwanted changes

* chore: packages moved based on eslint error

* feat: add babel-jest

* Merge branch 'master' of https://github.com/binary-com/deriv-app into RTL-JEST-improvements

* revert unneeded changes

Co-authored-by: Matin shafiei <[email protected]>

Author: Ali(Ako) Hosseini

jest.config.base.js

@@ -0,0 +1,17 @@
+/** This config file is for packages in monorepo
+    Universal configurations should go here
+ */
+
+module.exports = {
+    testRegex: "(/__tests__/.*|(\\.)(test|spec))\\.js?$",
+    // This is needed to transform es modules imported from node_modules of the target component.
+    transformIgnorePatterns: [
+        "/node_modules/(?!react-virtualized).+\\.js$",
+    ],
+    setupFiles: [
+        "<rootDir>/../../jest.setup.js",
+    ],
+    setupFilesAfterEnv:[
+        "<rootDir>/../../setupTests.js",
+    ],
+};

jest.config.js

@@ -4,24 +4,11 @@ module.exports = {
     coverageReporters: ['lcov'],
     coverageDirectory: './coverage/',
     clearMocks: true,
-    projects: [
-        '<rootDir>/packages/account/jest.config.js',
-        '<rootDir>/packages/shared/jest.config.js',
-        '<rootDir>/packages/trader/jest.config.js',
-        '<rootDir>/packages/core/jest.config.js',
-    ],
-    setupFiles: [
-        "<rootDir>/jest.setup.js",
-    ],
-    testRegex: [
-        '__tests__',
-        '.*.spec.js',
-    ],
+    projects: ['<rootDir>/packages/*/jest.config.js'],
     transform: {
         '^.+\\.jsx?$': 'babel-jest',
         '^.+/es/^.+$': 'babel-jest',
     },
-    transformIgnorePatterns: [
-        "/node_modules/(?!react-virtualized).+\\.js$",
-    ],
+    testRegex: ['__tests__', '.*.spec.js'],
+    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$'],
 };

package-lock.json

@@ -21,20 +21,24 @@
         "@testing-library/react": "^12.0.0",
         "babel-eslint": "^10.1.0",
         "babel-polyfill": "^6.26.0",
+        "chai": "^4.2.0",
         "eslint": "^7.18.0",
         "eslint-config-airbnb-base": "^14.2.1",
         "eslint-config-binary": "^1.0.2",
         "eslint-config-prettier": "^7.2.0",
         "eslint-formatter-pretty": "^4.0.0",
         "eslint-import-resolver-webpack": "^0.13.0",
         "eslint-plugin-import": "^2.23.4",
+        "eslint-plugin-jest-dom": "^3.8.1",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-react": "^7.22.0",
         "eslint-plugin-react-hooks": "^4.2.0",
+        "eslint-plugin-testing-library": "^4.2.0",
         "husky": "^4.2.5",
         "jest": "^26.4.2",
         "lerna": "^3.22.0",
         "lint-staged": "^10.4.0",
+        "mocha": "^7.1.1",
         "postcss": "^8.3.6",
         "prettier": "^2.1.2",
         "react-test-renderer": "^16.13.1",
@@ -84,9 +88,13 @@
         }
     },
     "dependencies": {
+        "@testing-library/jest-dom": "^5.12.0",
+        "babel-jest": "^27.3.1",
+        "dotenv": "^8.2.0",
+        "jest-chain": "^1.1.5",
+        "jest-extended": "^0.11.5",
         "react": "^16.14.0",
-        "react-dom": "^16.14.0",
-        "dotenv": "^8.2.0"
+        "react-dom": "^16.14.0"
     },
     "optionalDependencies": {
         "fsevents": "^2.3.2"

package.json

@@ -1,4 +1,7 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
 module.exports = {
+    ...baseConfigForPackages,
     moduleNameMapper: {
         '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
@@ -11,8 +14,4 @@ module.exports = {
         '^Sections/(.*)$': '<rootDir>/src/Sections/$1',
         '^Sections$': '<rootDir>/src/Sections/index.js',
     },
-    testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.js?$',
-    setupFiles: ['<rootDir>/../../jest.setup.js'],
-    // This is needed to transform es modules imported from node_modules of the target component.
-    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$'],
 };

packages/account/jest.config.js

@@ -36,7 +36,6 @@
   "license": "MIT",
   "devDependencies": {
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.5.2",
     "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
     "clean-webpack-plugin": "^3.0.0",
@@ -51,7 +50,6 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^26.4.2",
     "lint-staged": "^10.4.0",
     "loader-utils": "^1.1.0",
     "mini-css-extract-plugin": "^1.3.4",

packages/bot-web-ui/package.json

@@ -1,4 +1,7 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
 module.exports = {
+    ...baseConfigForPackages,
     moduleNameMapper: {
         "\\.s(c|a)ss$": "<rootDir>/../../__mocks__/styleMock.js",
         "^.+\\.svg$": "<rootDir>/../../__mocks__/styleMock.js",
@@ -14,12 +17,4 @@ module.exports = {
         '^Services$': "<rootDir>/src/Services/index.js",
         '^Stores\/(.*)$': "<rootDir>/src/Stores/$1",
     },
-    testRegex: "(/__tests__/.*|(\\.)(test|spec))\\.js?$",
-    setupFiles: [
-        "<rootDir>/../../jest.setup.js",
-    ],
-    // This is needed to transform es modules imported from node_modules of the target component.
-    transformIgnorePatterns: [
-        "/node_modules/(?!react-virtualized).+\\.js$",
-    ],
 };

packages/core/jest.config.js

@@ -1,4 +1,7 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
 module.exports = {
+    ...baseConfigForPackages,
     moduleNameMapper: {
         '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
@@ -9,9 +12,4 @@ module.exports = {
         '^Types/(.*)$': '<rootDir>/src/types/$1',
         '^Utils/(.*)$': '<rootDir>/src/utils/$1',
     },
-    testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.js?$',
-    setupFiles: ['<rootDir>/../../jest.setup.js'],
-
-    // This is needed to transform es modules imported from node_modules of the target component.
-    transformIgnorePatterns: ['/node_modules/(?!react-virtualized).+\\.js$'],
 };

packages/dashboard/jest.config.js

@@ -66,7 +66,6 @@
         "@typescript-eslint/eslint-plugin": "^4.10.0",
         "@typescript-eslint/parser": "^4.10.0",
         "babel-core": "^6.26.3",
-        "babel-jest": "^26.5.2",
         "babel-loader": "^8.1.0",
         "chai": "^4.2.0",
         "concurrently": "^5.3.0",

packages/dashboard/package.json

@@ -1,4 +1,7 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
 module.exports = {
+    ...baseConfigForPackages,
     transform: {
         '^.+\\.jsx?$': 'babel-jest',
     },

packages/indicators/jest.config.js

@@ -34,8 +34,6 @@
     "devDependencies": {
         "@babel/preset-env": "^7.12.11",
         "babel-eslint": "^10.1.0",
-        "babel-jest": "^26.5.2",
-        "jest": "^26.4.2",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-config-prettier": "^7.2.0",
         "eslint-config-airbnb-base": "^14.2.1",

packages/indicators/package.json

@@ -64,7 +64,6 @@
         "@deriv/publisher": "0.0.1-beta4",
         "babel-core": "^6.26.3",
         "babel-eslint": "^10.1.0",
-        "babel-jest": "^26.5.2",
         "babel-loader": "^8.1.0",
         "chai": "^4.2.0",
         "commander": "^3.0.2",

packages/p2p/package.json

@@ -1,10 +1,9 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
 module.exports = {
+    ...baseConfigForPackages,
     moduleNameMapper: {
         "\\.s(c|a)ss$": "<rootDir>/../../__mocks__/styleMock.js",
         "^.+\\.svg$": "<rootDir>/../../__mocks__/styleMock.js",
     },
-    testRegex: "(/__tests__/.*|(\\.)(test|spec))\\.js?$",
-    setupFiles: [
-        "<rootDir>/../../jest.setup.js",
-    ],
 };

packages/shared/jest.config.js

@@ -30,9 +30,7 @@
     "url": "https://github.com/binary-com/deriv-app/issues"
   },
   "devDependencies": {
-    "babel-jest": "^26.5.2",
     "chai": "^4.2.0",
-    "jest": "^26.4.2",
     "jsdom": "^16.2.1",
     "moment": "^2.24.0"
   },

packages/shared/package.json

@@ -1,4 +1,7 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
 module.exports = {
+    ...baseConfigForPackages,
     moduleNameMapper: {
         "\\.s(c|a)ss$": "<rootDir>/../../__mocks__/styleMock.js",
         "^.+\\.svg$": "<rootDir>/../../__mocks__/styleMock.js",
@@ -13,12 +16,4 @@ module.exports = {
         '^Services\/(.*)$': "<rootDir>/src/Services/$1",
         '^Stores\/(.*)$': "<rootDir>/src/Stores/$1",
     },
-    testRegex: "(/__tests__/.*|(\\.)(test|spec))\\.js?$",
-    setupFiles: [
-        "<rootDir>/../../jest.setup.js",
-    ],
-    // This is needed to transform es modules imported from node_modules of the target component.
-    transformIgnorePatterns: [
-        "/node_modules/(?!react-virtualized).+\\.js$",
-    ],
 };

packages/trader/jest.config.js

@@ -0,0 +1,21 @@
+/**
+ * This file created to use in `setupFilesAfterEnv` in jest setup
+ * For more info about it  please check the link below
+ * https://jestjs.io/docs/configuration#setupfilesafterenv-array
+ * */
+
+/** provides a set of custom jest matchers that you can use to extend jest.
+ * These will make your tests more declarative, clear to read and to maintain. */
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect'
+
+/**
+ * jest-extended aims to add additional matchers to Jest's default ones making it easy to test everything raised_hands
+ */
+import 'jest-extended';
+
+
+/**
+ * Chain Jest matchers together to write easier matchers and reduce code.
+*/
+import 'jest-chain';