Photo by Yi Ma on Unsplash

Writing Better Tests with Cypress Testing Library

In part five of the series, we will refactor our existing test to resemble user behavior by installing and using the Cypress Testing Library.

First, install Cypress Testing Library using the following command:

npm install --save-dev @testing-library/cypress

Next, add the following to the support/index.js file:

import '@testing-library/cypress/add-commands'

The final test file will look like the following:

describe('Google Search', () => {
  it('should return search results for "Ironman"', () => {
    cy.visit('https://www.google.com/')
    cy.findByLabelText('Search').type('Ironman Tony Stark').type('{enter}')
    cy.findByText('Tony Stark (Marvel Cinematic Universe) - Wikipedia').should('be.visible')
  })
})

The following video illustrates the entire process:

Part 6: Running Cypress in Multiple Browsers

The final source code can be found here