Integrate an awesome software testing tool, Cypress.io, into a React app in less than 5 minutes

Cypress.io makes end-to-end software testing simple and fun.

Why Test?

⚠️ Tests help developers validate updates and discover issues before they’re deployed to production.

Features

• Cypress can test anything that runs in a browser
• Works on any framework (ReactJS, Vue, Angular, Express.. you name it)
• Powered by Node.js — Tests are written in JavaScript
• Simple and approachable documentation
• No servers, drivers, or other dependencies to install
• Cypress has native access to every object within your application and can respond to events and read/modify network requests
• Executed in the same run loop as your application
• Watch tests run in real-time as you develop — TTD (test-driven development)
• Optionally use DevTools while your tests run to monitor console messages and network requests
• Tests include screenshots and video for historical reference
• Bundled with the best-of-breed open source testing libraries: Mocha (test structure), Chai (assertions), Chai-jQuery (extends Chai with jQuery-specific assertions), Sinon (spies, stubs, and mocks), Sinon-Chai (extends Sinon with assertions), lodash, jQuery, minimatch.js, moment.js, blob utils, Bluebird

Cypress’ Test Runner UI

Let’s get started!

Install the ReactJS starter application

1. Clone repo

git clone git@github.com:jcottam/blog.git

2. Change directory to cypress-io-react

cd cypress-io-react

2. Install application dependencies

npm install

3. Start server

npm start

4. Browse to http://localhost:3000/ to verify installation

Cypress.io Installation

1. Install Cypress

npm install cypress --save-dev

2. Add "cypress:open": "cypress open"to your scripts object in your package.json file

"scripts": {
   "cypress:open": "cypress open"
 }

3. Start Cypress

npm run cypress:open

If successful, you should see Cypress’ Test Runner open

Cypress’ Test Runner — example tests

4. Feel free to Run some of the example tests to see Cypress in action

Writing Your First Test

1. Create a new JS file in the following directory: /cypress/integration

simple_spec.js

2. Run npm run cypress:open if Cypress isn’t already running

3. Click the filename created above from the Cypress UI
(simple_spec.js in my case)

Click the filename of your test to Run

4. A new browser window will open and you’ll see the results of your 3rd-party API test

OMDB API test passed

Great! Now what?

Now that we’ve successfully written our first test, let’s write some tests that test the application UI, interactivity, and see how our app responds on mobile devices.

1. Verify Application Installation — Add the following lines of script to your test file (simple_spec.js)

2. Run the test.. if you’re like me, your Application UI test will FAIL

Our test is failing with a 404: Not Found error because our ReactJS application isn’t running in parallel with Cypress and because we haven’t specified a baseUrl in the cypress.json configuration file.

3. Specify the baseUrl of your ReactJS application in the cypress.json configuration file

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

4. Start your ReactJS app from a new terminal window

npm start

5. Run Cypress from a different terminal window

npm run cypress:open

6. Results should match the following:

All green lights!?

Great! Let’s add some interactivity tests to the mix

When the user clicks on a movie poster, the title and release date should appear in the header. Let’s write a test to ensure this functionality doesn’t break as we continue to add features to the app.

Click Movie, Expect Title

it('Click Movie, Expect Title', function() {
    cy.get('[data-cy=movie-3]').click()
    cy.get('[data-cy=selected-movie] .title').contains('Gone Girl')
  })

Click Movie, Expect Release Date

it('Click Movie, Expect Release Date', function() {
    cy.get('[data-cy=movie-6]').click()
    cy.get('[data-cy=selected-movie] .release-date').contains('01 Oct 1993')
})

In the tests above, I utilize Cypress’ DOM selector cy.get() to select and click a specific movie and then read the contents of the Title and Release Date to see if they match the expectations I’ve declared.

Final Test! Let’s see how we look on mobile

Responsive web design is no longer a value-add in this day and age, it’s a must! Let’s set a mobile expectation and take a screenshot to pass to our QA Team for regression testing.

1. Set Viewport to mobile (iPhone 6)
2. Test responsiveness of movie grid
3. Take Screenshot (saves to cypress/screenshots directory)

And there you have it.. integrating and testing a ReactJS app with Cypress.io in less than 5 minutes!

Remember!! Trying to shoehorn tests to an already built application is more difficult than developing/testing in parallel.

Test Driven Development is the way to build sound applications and Cypress.io is the tool for it!

Resources

• Project files can be found here
• Cypress.io API
• Best Practices