Implementing Your First End-to-End Tests In React Using Cypress

Share

Installing Cypress

Run the following command

npm install cypress --save-dev

Opening Cypress 

Use the following command to open cypress:

npx cypress open

After a moment, the cypress Test Runner will launch

Switching browsers

The Cypress Test Runner attempts to find all compatible browsers on the user’s machine.
The drop-down to select a different browser is in the top right corner of the Test Runner. 

Writing the first test

Create a new file cypress/intigration folder  called “sample_spec.js"

Once we’ve created that file, we should see the Cypress Test Runner immediately display it in the list of Integration Tests. Cypress monitors your spec files for any changes and automatically displays any changes.

Even though we haven’t written any tests yet – that’s okay – let’s click on sample_spec.js and watch Cypress launch your browser.

Now Open up your favorite IDE and add the code below to our sample_spec.js test file.

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

Once you save this file you should see the browser reload.

Although it doesn’t do anything useful, this is our first passing test! ✅

Now let’s write our first failing test.

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

Once you save again, you’ll see Cypress display the failing test in red since true does not equal false. Cypress also displays the stack trace and the code frame where the assertion failed (when available). You can click on the blue file link to open the file where the error occurred in your preferred file opener. To read more about the error’s display, read about Debugging Errors.

Cypress provides a nice Test Runner that gives you a visual structure of suites, tests, and assertions

Share

Leave a Reply

Your email address will not be published.

%d bloggers like this: