Prevent push when skipping Cypress tests

There is a more updated method I use now descried in the part 2.

Here's way I use to prevent pushing changes when some of the Cypress tests are being skipped

Install required packages

npm i -D cypress husky start-server-and-test

Define your dev script in package.json if not done by your scaffolding

...
"scripts": {
+  "dev": "<start your server>"
}

Test by running and make sure your server started

npm run dev

Create the file cypress.json, modify the port if needed

{
  "baseUrl": "http://localhost:3000/"
}

Common Cypress run script

...
"scripts": {
  "dev": "<start your server>",
+ "cy:run": "cypress run"
}

Running Cypress for the first time initializes it

$ npm run cy:run
Can't run because no spec files were found.
We searched for any files inside of this folder:
/project-path/cypress/integration

Test script waits for dev and then does cy:run

...
"scripts": {
  "dev": "<start your server>",
  "cy:run": "cypress run",
+ "test": "start-server-and-test dev http://localhost:3000 cy:run"
}

A start-test is a shorter alias and specifying port is sufficient

...
"scripts": {
  "dev": "<start your server>",
  "cy:run": "cypress run",
- "test": "start-server-and-test dev http://localhost:3000 cy:run"
+ "test": "start-test dev 3000 cy:run"
}

Create the simplest test in cypress/integration/spec.js

/// <reference types="cypress" />
describe("Simplest test should", () => {
  it("visit base URL", () => {
    cy.visit("/")
  })
})

So far so good, just a quick sanity check

npm run test

Add a pre-push hook into package.json

"scripts": {
  "dev": "<start your server>",
  "cy:run": "cypress run",
  "test": "start-test dev 3000 cy:run"
},
...
+"husky": {
+  "hooks": {
+    "pre-push": "npm run test"
+  }
}

Modify the spec.js to contain either .skip or .only Mocha modifier

/// <reference types="cypress" />
describe("Simplest test should", () => {
  it.only("visit base URL", () => {
    cy.visit("/")
  })
})

Lastly, skipped tests detection before the tests

...
"scripts": {
  "dev": "<start your server>",
  "cy:run": "cypress run",
  "test": "start-test dev 3000 cy:run"
},
"husky": {
  "hooks": {
-   "pre-push": "npm run test"
+   "pre-push": "grep -Rvzq -e '.skip' -e '.only' cypress/integration && npm run test"
  }
}

Done!

Sources are available in the repository

Links