Automated End-to-End Testing with Cypress and Husky Pre-Commit hooks

What is Cypress?

Why should I use it?

What are the drawbacks?

How do I set it up and use it?

Sample React App
describe(“Our first test”, () => {  it(‘should go to our sample react app, () => {    cy.visit(“http://localhost:3000/");})}
cy.get(‘#formBasicEmail’).type(‘test’);
.should() — check for various thing.click() — click elements.contains() — checks if the DOM contains a string.url() — checks for URL properties
describe(“Our first test”, () => {  it(“should go to our sample react app”, () => {    cy.visit(“http://localhost:3000/");    cy.contains(“Cypress testing with Husky pre-commit hooks”);  });  it(“should see that the submit button is disabled”, () => {    cy.get(‘.submitBtn’).should(‘be.disabled’);    cy.get(‘.modalBtn’).should(‘be.enabled’);  });  it(“should enter some incorrect email value — submit should be         disabled and modal should be enabled”, () => {  cy.get(‘#formBasicEmail’).type(‘test’);  cy.get(‘.submitBtn’).should(‘be.disabled’);  cy.get(‘.modalBtn’).should(‘be.enabled’); }); it(“should enter some password value — submit should be disabled and modal should be enabled”, () => {  cy.get(‘#formBasicPassword’).type(‘test@test.com’);  cy.get(‘.submitBtn’).should(‘be.disabled’);  cy.get(‘.modalBtn’).should(‘be.enabled’); });  it(“should check the box — submit should be enabled and modal should be disabled”, () => {  cy.get(‘#formBasicCheckbox’).click();  cy.get(‘.submitBtn’).should(‘be.enabled’);  cy.get(‘.modalBtn’).should(‘be.disabled’);  });});
Cypress.Commands.add(‘checkForm’, () => {   cy.get(‘.submitBtn’).should(‘be.disabled’); cy.get(‘.modalBtn’).should(‘be.enabled’);
});
Final Result
npm install husky — save-devnpx husky install
npx husky add .husky/pre-commit “npm test”
Passing Test
Final Output
Failing Test

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store