chore(test): Integrate testing library

- Add Jest test framework
- Add Reac Testing Library
- Add Jest config file
- Add Card Component unit tests
- Add Image Component unit test

Author: devPinheiro

.babelrc

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

.gitignore

@@ -5,4 +5,6 @@ node_modules
 coverage
 docs.md
 package-lock.json
-src/api
+src/api
+build
+yarn.lock

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 node_js:
   - node
-script: npm run test:coverage
+script: yarn 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,22 +5,20 @@
   "main": "index.js",
   "scripts": {
     "dev": "nodemon  --exec babel-node src/app.js ",
-    "test": "cross-env NODE_env=production nyc mocha --require babel-core/register src/**/test.js --timeout 8000 --exit",
+    "test": "jest",
+    "test:watch": "jest --watchAll",
     "coverage": "nyc report --reporter=text-lcov | coveralls",
     "build": "babel src --out-dir build ",
     "heroku-postbuild": "npm run build",
     "start": "node build/app.js",
     "webpack": "webpack",
     "precommit": "lint-staged"
   },
-
   "lint-staged": {
     "*.{js,jsx}": [
-   
-    "git add"
+      "git add"
     ]
-    },
-
+  },
   "nyc": {
     "require": [
       "@babel/register"
@@ -36,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",
@@ -53,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') 
+  });
+});