PR-753737: Agregando Jest y Testing Library para testing.

client/.babelrc

@@ -1,6 +1,6 @@
 {
     "presets": [
-        "@babel/preset-env",
+        ["@babel/preset-env", {"targets": {"node": "current"}}],
         "@babel/preset-react",
         "@babel/preset-typescript"
     ]

client/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/setupTest.js'],
+  "testEnvironment": "jsdom",
+  moduleNameMapper: {
+    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
+    "\\.(css|sass|less)$": "identity-obj-proxy"
+  },
+};

client/package.json

@@ -9,7 +9,8 @@
     "build": "webpack-cli --config webpack.config.js",
     "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
     "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "repository": {
     "type": "git",
@@ -60,12 +61,17 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^14.1.1",
+    "@types/jest": "^27.4.1",
     "@types/node": "^17.0.25",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.1",
     "@types/webpack-hot-middleware": "^2.25.6",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
+    "babel-jest": "^28.0.2",
     "babel-loader": "^8.2.4",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^9.2.0",
@@ -76,6 +82,9 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.5.1",
+    "jest-fetch-mock": "^3.0.3",
     "mini-css-extract-plugin": "^2.6.0",
     "react-refresh": "^0.12.0",
     "redux-devtools-extension": "^2.13.9",

client/setupTest.js

@@ -0,0 +1,20 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+
+//import fetch Mock
+import fetchMock from "jest-fetch-mock";
+fetchMock.enableMocks();
+
+//Fixing Pollyfill for react-slick
+window.matchMedia =
+window.matchMedia ||
+function() {
+    return {
+        matches: false,
+        addListener: function() {},
+        removeListener: function() {}
+    };
+};

client/src/__mocks__/ProviderMock.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import initialStateReducer from '../frontend/reducers/initialState';
+import setStore from '../frontend/setStore';
+
+const ProviderMock = ({ children, initialState }) => {
+    let initialStateMock = initialStateReducer
+
+    if(initialState !== undefined){
+        initialStateMock = initialState
+    }
+
+    const history = createMemoryHistory();
+    const store = setStore({ initialState: initialStateMock });
+
+    return(
+        <Provider store={store}>
+            <Router location={history.location} navigator={history}>
+                {children}
+            </Router>
+        </Provider>
+    )
+}
+
+export default ProviderMock;

client/src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = ''; 

client/src/frontend/components/__tests__/App.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ProviderMock from '../../../__mocks__/ProviderMock';
+import App from '../App';
+
+describe('<App/> Component', () => {
+    beforeEach(() => {
+        fetch.resetMocks();
+    });
+
+    test('Should render root <App /> Component', async () => {
+        fetch.mockResponseOnce(JSON.stringify({
+            //First Data Fetch
+            data: 'data'
+        }));
+
+        render(
+            <ProviderMock>
+                <App />
+            </ProviderMock>
+        )
+    })
+})

client/src/frontend/index.tsx

@@ -4,7 +4,7 @@ import { hydrateRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 // Redux
 import { Provider } from 'react-redux';
-import { IInitialState } from './reducers/index.js';
+import { IInitialState } from './reducers/index';
 import setStore from './setStore.js';
 import { config } from '../../config';
 

client/src/server/index.js

@@ -6,7 +6,7 @@ require('ignore-styles');
 
 require('@babel/register')({
 	'presets': [
-		'@babel/preset-env',
+		['@babel/preset-env', {'targets': {'node': 'current'}}],
 		'@babel/preset-react',
 		'@babel/preset-typescript',
 	]