Integrate testing library

.babelrc

@@ -2,17 +2,5 @@
   "presets": [
       "env",
       "@babel/preset-react"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        "istanbul"
-      ]
-    },
-    "production": {
-      "plugins": [
-        "istanbul"
-      ]
-    }
-  }
+  ]
 }

.gitignore

@@ -8,3 +8,4 @@ package-lock.json
 src/api
 build
 dist
+yarn.lock

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 node_js:
   - node
-script: npm run test
+script: npm test

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  collectCoverage: true,
+  // Automatically clear mock calls and instances between every test
+  clearMocks: true,
+  testPathIgnorePatterns: ['/node_modules/', '/cypress/','build']
+};

package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "dev": "nodemon  --exec babel-node src/app.js ",
+    "test:watch": "jest --watchAll",
     "coverage": "nyc report --reporter=text-lcov | coveralls",
     "build": "webpack --mode production ",
     "heroku-postbuild": "npm run build",
@@ -13,13 +14,11 @@
     "precommit": "lint-staged",
     "test": ""
   },
-
   "lint-staged": {
     "*.{js,jsx}": [
-    "git add"
+      "git add"
     ]
-    },
-
+  },
   "nyc": {
     "require": [
       "@babel/register"
@@ -35,13 +34,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.0",
     "apollo-boost": "^0.4.4",
     "babel-preset-env": "^2.0.0-alpha.20",
     "bcryptjs": "^2.4.3",
     "chai-http": "^4.2.0",
     "classnames": "^2.2.6",
     "express": "^4.16.3",
     "graphql": "^14.5.8",
+    "jest": "^25.1.0",
     "joi": "^14.0.1",
     "jsonwebtoken": "^8.3.0",
     "mongoose": "^5.3.6",
@@ -52,6 +54,7 @@
     "react-apollo": "^3.1.3",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
+    "react-test-renderer": "^16.12.0",
     "swagger-ui-express": "^4.0.1"
   },
   "devDependencies": {

src/client/components/Card/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const Card = ({ featured_image, title, description, tags, ...rest }) => {
   return (
-    <div className="max-w-sm  m-2 rounded overflow-hidden shadow-lg">
+    <div className="max-w-sm  m-2 rounded overflow-hidden shadow-lg" data-testid="card-component">
       <img
         className="w-full"
         src={

src/client/components/Card/index.spec.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Card from './index';
+
+afterEach(cleanup);
+
+describe('Card Component Unit Testing', () => {
+  it('Should render component when mounted', () => {
+    const { getByTestId } = render(
+      <Card featured_image="test.png" description="testing" title="new component" tags="test" />
+    );
+
+    expect(getByTestId('card-component')).toHaveTextContent('new component');
+  });
+
+  it('Should render component when mounted with conditional prop', () => {
+    const image = [
+      {
+        url: 'sample.png',
+      },
+    ];
+    const { getByTestId } = render(
+      <Card featured_image={image} description="testing" title="new component" tags="test" />
+    );
+
+    expect(getByTestId('card-component')).toHaveTextContent('new component');
+  });
+});

src/client/components/Image/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 const Image = ({src, alt, className }) => {
   return (
     <img 
+       data-testid="image-component"
        src={src}
        alt={alt}
        className={className} 
@@ -14,7 +15,7 @@ const Image = ({src, alt, className }) => {
 Image.propTypes = {
   src: PropTypes.string,
   alt: PropTypes.string,
-  className: PropTypes.sttring,
+  className: PropTypes.string,
 };
 
 export default Image

src/client/components/Image/index.spec.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom"
+import Image from "./index";
+
+afterEach(cleanup);
+
+describe("Image Component Unit Testing", () => {
+  it("Should render component when mounted", () => {
+    const { getByTestId} = render(
+      <Image className="bg-gray-500" src='test' alt="test"/>
+    );
+
+    expect(getByTestId("image-component")).toHaveAttribute('alt', 'test') 
+  });
+});