feat: tested my test environment configuration by adding snapshot test

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

enzyme.js

@@ -0,0 +1,3 @@
+const Adapter = require('enzyme-adapter-react-16');
+
+require('enzyme').configure({adapter: new Adapter()});

jest.config.js

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

package.json

@@ -14,6 +14,9 @@
     "lint:fix": "eslint src/**/*.js src/**/*.js .eslintrc.json --fix --ext js,jsx"
   },
   "dependencies": {
+    "@jest/globals": "^26.6.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
     "next": "10.0.6",
     "react": "17.0.1",
     "react-dom": "17.0.1"
@@ -22,11 +25,14 @@
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@fullhuman/postcss-purgecss": "^4.0.0",
+    "@testing-library/dom": "^7.29.4",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^3.4.2",
     "axios": "^0.21.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "8.0.1",
-    "babel-jest": "^26.6.0",
+    "babel-jest": "^26.6.3",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "check-prop-types": "^1.1.2",
@@ -37,6 +43,8 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "husky": "^4.3.0",
+    "jest": "^26.6.3",
+    "jest-dom": "^4.0.0",
     "lint-staged": "^10.4.2",
     "postcss-preset-env": "^6.7.0",
     "prop-types": "^15.7.2",
@@ -52,7 +60,8 @@
   },
   "lint-staged": {
     "./**/*.{js,jsx,ts,tsx}": [
-      "eslint src/**/*.js src/**/*.js"
+      "eslint src/**/*.js src/**/*.js",
+      "yarn test"
     ]
   }
 }

pages/_app.js

@@ -1,10 +1,15 @@
 import '../styles/globals.css';
 import '../styles/tailwind.css';
 import PropTypes from 'prop-types';
+import Layout from '../src/components/Layout';
 
 
 function MyApp({Component, pageProps}) {
-  return <Component {...pageProps} />;
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
 

src/components/Layout/Layout.js

@@ -0,0 +1,18 @@
+import styles from './styles.module.css';
+import PropTypes from 'prop-types';
+
+
+export const Layout = ({children}) => {
+  return (
+    <div className={styles.contain}>
+      {children}
+    </div>
+  );
+};
+
+Layout.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.func
+  ]),
+};

src/components/Layout/__tests__/__snapshots__/layout.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`layout Component matches the navbar snapshots 1`] = `
+<div
+  className="contain"
+/>
+`;

src/components/Layout/__tests__/layout.spec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Layout from '../';
+import renderer from 'react-test-renderer';
+import {describe, it} from '@jest/globals';
+
+describe('layout Component', () => {
+
+  it('matches the navbar snapshots', () => {
+    const tree = renderer.create(
+      <Layout/>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Layout/index.js

@@ -0,0 +1,4 @@
+import {Layout} from './Layout';
+
+
+export default Layout;

src/components/Layout/styles.module.css

@@ -0,0 +1,4 @@
+.contain{
+    max-width: 80rem;
+    @apply m-auto
+}

styles/tailwind.css

@@ -1,5 +1,154 @@
 /* purgecss start ignore */
-@tailwind  base;
-@tailwind  components;
+@tailwind base;
+@tailwind components;
 /* purgecss end ignore */
-@tailwind  utilities;
+@tailwind utilities;
+
+
+@layer base {
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-thinitalic-webfont.ttf') format('truetype');
+        font-weight: 100;
+        font-style: italic;
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-thin-webfont.ttf') format('truetype');
+        font-weight: 100;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-extrathinitalic-webfont.ttf') format('truetype');
+        font-weight: 200;
+        font-style: italic;
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-extrathin-webfont.ttf') format('truetype');
+        font-weight: 200;
+        font-style: normal;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-lightitalic-webfont.ttf') format('truetype');
+        font-weight: 300;
+        font-style: italic;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-light-webfont.ttf') format('truetype');
+        font-weight: 300;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-regularitalic-webfont.ttf') format('truetype');
+        font-weight: 400;
+        font-style: italic;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-regular-webfont.ttf') format('truetype');
+        font-weight: 400;
+        font-style: normal;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-semibolditalic-webfont.ttf') format('truetype');
+        font-weight: 600;
+        font-style: italic;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+
+        src: url('/fonts/averta-semibold-webfont.eot');
+        src: url('/fonts/averta-semibold-webfont.eot?#iefix') format('embedded-opentype'),
+        url('/fonts/averta-semibold-webfont.woff') format('woff'),
+        url('/fonts/averta-semibold-webfont.ttf') format('truetype'),
+        url('/fonts/averta-semibold-webfont.svg#avertasemibold') format('svg');
+        font-weight: 600;
+        font-style: normal;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-bolditalic-webfont.ttf') format('truetype');
+        font-weight: 700;
+        font-style: italic;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-bold-webfont.eot');
+        src: url('/fonts/averta-bold-webfont.eot?#iefix') format('embedded-opentype'),
+        url('/fonts/averta-bold-webfont.woff') format('woff'),
+        url('/fonts/averta-bold-webfont.ttf') format('truetype'),
+        url('/fonts/averta-bold-webfont.svg#avertabold') format('svg');
+        font-weight: 700;
+        font-style: normal;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-extrabolditalic-webfont.ttf') format('truetype');
+        font-weight: 800;
+        font-style: italic;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-extrabold-webfont.ttf') format('truetype');
+        font-weight: 800;
+        font-style: normal;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-blackitalic-webfont.ttf') format('truetype');
+        font-weight: 900;
+        font-style: italic;
+
+    }
+
+    @font-face {
+        font-family: 'averta';
+        src: url('/fonts/averta-black-webfont.ttf') format('truetype');
+        font-weight: 900;
+        font-style: normal;
+
+    }
+}
+
+p {
+    @apply m-0 ;
+}
+
+body {
+    @apply m-0 overflow-x-hidden bg-night;
+}
+
+* {
+    @apply font-sans font-normal text-base text-white;
+}

tailwind.config.js

@@ -6,6 +6,25 @@ module.exports = {
   purge: [],
   theme: {
     extend: {},
+    screens: {
+      'sm': {'min': '320px', 'max': '767px'},
+      'md': {'min': '768px', 'max': '1279px'},
+      'lg': {'min': '1280'},
+      'xl': {'min': '1280px', 'max': '2399px'},
+      // 'xxl': {'min': '2400px'}
+    },
+    colors: {
+      night: '#2b3038',
+      white: '#fff',
+      blue: '#007ace',
+      red: '#CA2C33',
+      error: '#ED4337',
+      lightpink: '#FFB1B3',
+    },
+    fontFamily: {
+      // Comma-delimited format:
+      'sans': 'averta, Arial, sans-serif',
+    }
   },
   variants: {},
   plugins: [],