Added cypress e2e testing framework, moved jest tests to component folders

Author: osheinonen

.circleci/config.yml

@@ -43,13 +43,13 @@ jobs:
           key: v1-circleci-nextjs-project-{{ .Branch }}-{{ .Revision }}
       - run:
           name: Jest tests
-          command: cd build_path && npm run test:unit
+          command: cd build_path && npm run test:jest
       - store_artifacts:
           path: ~/project/build_path/src/tests/__image_snapshots__/__diff_output__
           destination: diff_output
       - run:
           name: Update image snapshots when tests fails
-          command: cd build_path && npm run test:unit -- -u
+          command: cd build_path && npm run test:jest:update
           when: on_fail
       - store_artifacts:
           path: ~/project/build_path/src/tests/__image_snapshots__

cypress.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "testFiles": "**/*.*spec.*",
+  "ignoreTestFiles": ["**/__snapshots__/*", "**/__image_snapshots__/*"],
+  "pluginsFile": "cypress/plugins/index.ts",
+  "supportFile": "cypress/support/index.ts",
+  "video": false
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/home-page.spec.ts

@@ -0,0 +1,11 @@
+import {
+  smallBreakpoint,
+  mediumBreakpoint,
+  largeBreakpoint,
+} from "@/utils/constants";
+
+describe("The Home Page", () => {
+  it("successfully loads homepage", () => {
+    cy.visit("/");
+  });
+});

cypress/plugins/index.ts

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+// const { initPlugin } = require("cypress-plugin-snapshots/plugin");
+
+// module.exports = (on, config) => {
+//   initPlugin(on, config);
+//   return config;
+// };
+
+// import { initPlugin } from "cypress-plugin-snapshots/plugin";
+
+// export default (on, config) => {
+//   initPlugin(on, config);
+//   return config;
+// };

cypress/support/index.ts

@@ -0,0 +1 @@
+// import "cypress-plugin-snapshots/commands";

cypress/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["cypress"]
+  },
+  "include": [
+    "../node_modules/cypress",
+    "./**/*.ts"
+  ]
+}

jest.config.js

@@ -2,9 +2,14 @@ module.exports = {
   verbose: true,
   testEnvironment: "jsdom",
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
-  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
+  testPathIgnorePatterns: [
+    "<rootDir>/cypress/",
+    "<rootDir>/.next/",
+    "<rootDir>/node_modules/",
+  ],
   moduleNameMapper: {
     "\\.(scss|sass|css)$": "identity-obj-proxy",
     "@/components/(.*)": "<rootDir>/src/components/$1",
+    "@/utils/(.*)": "<rootDir>/src/utils/$1",
   },
 };