diff --git a/.gitignore b/.gitignore
index 97f51cd8..6727a03d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,6 @@ client/dist
andela_creds.json
artifacts/
htmlcov/
+
+revampedClient/coverage
+revampedClient/**/**/__snapshots__/*.test.js.snap
diff --git a/revampedClient/__mocks__/fileMock.js b/revampedClient/__mocks__/fileMock.js
new file mode 100644
index 00000000..86059f36
--- /dev/null
+++ b/revampedClient/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/revampedClient/__mocks__/styleMock.js b/revampedClient/__mocks__/styleMock.js
new file mode 100644
index 00000000..f053ebf7
--- /dev/null
+++ b/revampedClient/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/revampedClient/__tests__/components/cards/Card.test.js b/revampedClient/__tests__/components/cards/Card.test.js
new file mode 100644
index 00000000..4be2d337
--- /dev/null
+++ b/revampedClient/__tests__/components/cards/Card.test.js
@@ -0,0 +1,21 @@
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import Card from '../../../components/cards/Card';
+
+describe('Card component', () => {
+ it('should render correctly', () => {
+ const props = {
+ style: {
+ height: '10px',
+ width: '120px',
+ },
+ children: '
code block
',
+ };
+ const wrapper = shallow();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/revampedClient/__tests__/setup/setupEnzyme.js b/revampedClient/__tests__/setup/setupEnzyme.js
new file mode 100644
index 00000000..fc7b0dce
--- /dev/null
+++ b/revampedClient/__tests__/setup/setupEnzyme.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/revampedClient/assets/components/_card.scss b/revampedClient/assets/components/_card.scss
index e69de29b..7416fa7e 100644
--- a/revampedClient/assets/components/_card.scss
+++ b/revampedClient/assets/components/_card.scss
@@ -0,0 +1,8 @@
+
+.card {
+ border-radius: 10px;
+ box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+ min-height: 200px;
+ min-width: 250px;
+ padding: 10px;
+}
diff --git a/revampedClient/components/cards/Card.jsx b/revampedClient/components/cards/Card.jsx
new file mode 100644
index 00000000..6f502e9f
--- /dev/null
+++ b/revampedClient/components/cards/Card.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../../assets/components/_card.scss';
+
+/**
+ * @description - This component displays a reusable card
+ *
+ * @param {object} props { children, style }
+ *
+ * @returns JSX
+ */
+const Card = (props) => {
+ const {
+ children, style,
+ } = props;
+
+ return (
+
+ {children}
+
+ );
+};
+
+Card.propTypes = {
+ children: PropTypes.string.isRequired,
+ style: PropTypes.objectOf(PropTypes.string),
+};
+
+Card.defaultProps = { style: {} };
+
+export default Card;
diff --git a/revampedClient/index.js b/revampedClient/index.js
index e6572dd8..d12bcb1e 100644
--- a/revampedClient/index.js
+++ b/revampedClient/index.js
@@ -5,6 +5,8 @@ import ReactDOM from 'react-dom';
import './assets/style.scss';
ReactDOM.render(
- Andela Socials Revamping on process
,
+
+ Andela Socials Revamping on process
+
,
document.getElementById('app')
);
diff --git a/revampedClient/jest.config.js b/revampedClient/jest.config.js
new file mode 100644
index 00000000..c2b128e2
--- /dev/null
+++ b/revampedClient/jest.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ clearMocks: true,
+ coverageDirectory: 'coverage',
+ testRegex: '(roots/.*|(\\.|/)(test))\\.(js|jsx)?$',
+ testEnvironment: 'node',
+ testPathIgnorePatterns: [
+ '/node_modules/',
+ '/cypress/',
+ '/__tests__/setup/',
+ ],
+ setupTestFrameworkScriptFile: '/__tests__/setup/setupEnzyme.js',
+ moduleNameMapper: {
+ '\\.(css|less|sass|scss)$': '/__mocks__/styleMock.js',
+ '\\.(gif|ttf|eot|svg)$': '/__mocks__/fileMock.js',
+ },
+};