PR-188649:

Adding Test to proyect.

jest.config.js

@@ -0,0 +1,10 @@
+
+   
+module.exports = {
+    setupFilesAfterEnv: ['<rootDir>/setupTest.ts'],
+    "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.ts",
+      "\\.(css|sass|less)$": "identity-obj-proxy"
+    },
+  };

package.json

@@ -5,7 +5,10 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
+    "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "repository": {
     "type": "git",
@@ -30,6 +33,10 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/register": "^7.17.7",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.0",
+    "@types/jest": "^27.5.1",
     "@types/node": "^17.0.36",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
@@ -42,6 +49,10 @@
     "eslint": "^8.16.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-webpack-plugin": "^3.1.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "jest-fetch-mock": "^3.0.3",
     "mini-css-extract-plugin": "^2.6.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

setupTest.ts

@@ -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() {}
+    };
+};

src/__mocks__/fileMock.ts

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

src/components/__tests__/Card.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Card } from '../Card';
+
+describe('<App/> Component', () => {
+    beforeEach(() => {
+        fetchMock.resetMocks();
+    });
+
+    test('Should render <Card /> Component', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            //First Data Fetch
+            data: 'data'
+        }));
+
+        render(
+            <Card title='Test Title'><p>Test Content</p></Card>
+        )
+    })
+})