Using Cypress for TDD

The applications of writing tests for your code extend far beyond simply verifying for yourself that a process is working, and in my few short days learning the fundamentals of Cypress, I can confirm that it is a super straightforward way of implementing test-driven development and incredibly easy to learn. Let’s jump right into it!

SETUP / INSTALLATION

Here are the commands to initialize a Cypress project within your working repository:

npm init -y
npm i cypress
npx cypress open

These commands run the following processes:

• Initializes the repository as a node project (for package managing capabilities).
• Installs Cypress.
• Opens Cypress in a separate window.

Upon opening Cypress, you should see a list of 20 or so tests under the “Integration Tests” tab. None of these are necessary, so navigate into the Cypress/integrations directory and delete all of the files and folders. Add one file to the integration folder called “spec.js” and the Cypress window should appear as such:

We are now ready to start writing tests within this spec file!

BASIC TESTS

The most basic example of the syntax that Cypress uses is illustrated in this example:

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

This should result in the following output after clicking the “Run 1 integration spec” button in the top right corner of my last screencap:

(stunning, right?)

Here is a breakdown of the syntax:

• The “describe” will illustrate the title of the test that will appear to the user in the browser window running Cypress. It points to an arrow function.
• The arrow function “it” points to the specific text of the test that we will want to pass, and points to another arrow function.
• The “expect” will be the expectation of the test, and the following arguments are compared to each other using “.to.equal”
• As “true” is being compared to “true”, the test will pass as this is universally… well, true.

For a bit more perspective, I will use the example from my “hello world” test embedded within a React repository. This will highlight how to have Cypress point to the server you are running in a testing environment and also look for an element on the page!

Here is the code that I wrote for my test:

describe('Next Test', () => {
  it('contains the text "Hello World".', () => {
    cy.visit('http://localhost:3001')
    cy.contains('Hello World') 
  })
})

I have modified my App.js to only display an h1 of the text “Hello World”. This is a look at the Cypress test being passed:

The only crucial thing to note in this test is that the “cy.visit” is pointing to the link that my project is running on, and instead of using “expect” here we are using “cy.contains” to check the page and see if the following text exists on the page.

Although this is a fairly novice introduction, much more can be read about Cypress on their website where much more of their power can be understood.

I hope this has been an enlightening introduction to Cypress for you!