feat: add cypress

.eslintrc

@@ -16,14 +16,9 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:jsx-a11y/recommended"
   ],
-  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": ["./tsconfig.json", "./tsconfig.node.json"],
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
+    "tsconfigRootDir": "./"
   },
   "plugins": ["prettier", "react", "react-hooks", "@typescript-eslint", "import"],
   "rules": {

.gitignore

@@ -22,3 +22,12 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Cypress
+/cypress/videos
+/cypress/screenshots
+
+# Env
+.env
+.env.production
+.envrc

README.md

@@ -12,7 +12,6 @@ To have the best dev experience possible, I picked these technologies (they may
 # TODO:
 
 - Add husky + git-cz + commitizen
-- Add cypress
 - Add storybook
 - Add vite-plugin-ssr
 - Setup CI with github actions

cypress.json

@@ -0,0 +1,3 @@
+{
+  "integrationFolder": "cypress/e2e"
+}

cypress/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "parserOptions": {
+    "tsconfigRootDir": "./cypress",
+    "project": "./tsconfig.json"
+  }
+}

cypress/e2e/smoke.spec.ts

@@ -0,0 +1,17 @@
+describe('Smoke test', () => {
+  it('should navigate through about and home pages', () => {
+    cy.visit('/')
+
+    // About page
+    cy.findByRole('link', { name: /go to about/i }).click()
+    cy.url().should('include', '/about')
+
+    // Homepage
+    cy.findByRole('link', { name: /go to homepage/i }).click()
+    cy.url().should('include', '/')
+
+    // About
+    cy.findByRole('link', { name: /go to about/i }).click()
+    cy.url().should('include', '/about')
+  })
+})

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/plugins/index.ts

@@ -0,0 +1,21 @@
+// https://on.cypress.io/plugins-guide
+module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
+  const isDev = config.watchForFileChanges
+  const port = process.env.PORT ?? (isDev ? '3000' : '1234')
+  const configOverrides: Partial<Cypress.PluginConfigOptions> = {
+    baseUrl: `http://localhost:${port}`,
+    video: !process.env.CI,
+    screenshotOnRunFailure: !process.env.CI,
+  }
+  Object.assign(config, configOverrides)
+
+  on('task', {
+    log(message) {
+      // eslint-disable-next-line no-console
+      console.log(message)
+      return null
+    },
+  })
+
+  return config
+}

cypress/support/index.ts

@@ -0,0 +1,2 @@
+import '@testing-library/cypress/add-commands'
+import './commands'

cypress/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "exclude": ["../node_modules/vitest/globals", "../node_modules/@testing-library/jest-dom"],
+  "include": [
+    "e2e/**/*",
+    "plugins/**/*",
+    "support/**/*",
+    "../node_modules/cypress",
+    "../node_modules/@testing-library/cypress"
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "noEmit": true,
+    "types": ["node", "cypress", "@testing-library/cypress"],
+    "esModuleInterop": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "target": "es2019",
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "typeRoots": ["../types", "../node_modules/@types"]
+  }
+}

package.json

@@ -4,15 +4,19 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "dev": "vite dev",
     "test": "vitest run",
     "test:watch": "vitest watch",
+    "cy:open": "cypress open",
+    "test:e2e:dev": "start-server-and-test 'yarn dev' 'http-get://localhost:3000' 'yarn cy:open'",
+    "cy:run": "cypress run",
+    "ci": "cross-env PORT=1234 start-server-and-test 'yarn dev' 'http-get://localhost:1234' 'yarn cy:run'",
     "coverage": "vitest run --coverage",
     "typecheck": "tsc -b",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/.eslintcache --ext js,jsx,ts,tsx .",
-    "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|gql|graphql|mdx|vue)\"",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|gql|graphql|mdx|vue)\""
   },
   "dependencies": {
     "clsx": "^1.1.1",
@@ -24,6 +28,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^6.0.0-alpha.7",
+    "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/react-hooks": "^7.0.2",
@@ -35,8 +40,12 @@
     "@typescript-eslint/parser": "^5.13.0",
     "@vitejs/plugin-react": "^1.2.0",
     "autoprefixer": "^10.4.2",
+    "cross-env": "^7.0.3",
+    "cypress": "^9.5.1",
+    "dotenv": "^16.0.0",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
@@ -47,6 +56,7 @@
     "postcss": "^8.4.7",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.8",
+    "start-server-and-test": "^1.14.0",
     "typescript": "^4.6.2",
     "vite": "^2.8.6",
     "vite-tsconfig-paths": "^3.4.1",

tsconfig.json

@@ -24,6 +24,7 @@
       "@components/*": ["./src/components/*"]
     }
   },
-  "include": ["./src", "./public/mockServiceWorker.js"],
+  "exclude": ["./cypress"],
+  "include": [".", "./public/mockServiceWorker.js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -3,10 +3,16 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import 'dotenv/config'
+
+const isDev = process.env.CI
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
+  server: {
+    port: Number(process.env.PORT) ?? (isDev ? 1234 : 3000),
+  },
   // vitest config
   test: {
     // https://vitest.dev/config/