Name: Assert on XHR Requests in Cypress
Uploaded: 2019-04-23T11:40:53-05:00
Description: In this lesson, we'll learn to test the seam between frontend and backend -- our XHR requests. Using cy.route as if we were mocking our backend requests, we can instead spy on the request, and intercept its data to run tests against.

Course Introduction: Test Production Ready Apps with Cypress

Install Cypress in a Production Application

Setup Your Cypress Dev Environment

Write Your First Cypress Integration Test

Use the Most Robust Selector for Cypress Tests

Debug and Log with Cypress

Mock Your Backend with Cypress

Assert on Your Redux Store with Cypress

Create Custom Cypress Commands

Wrap External Libraries with Cypress

Reuse Data with Cypress Fixtures

Mock Network Retries with Cypress

Find Unstubbed Cypress Requests with Force 404

Extend Cypress with Plugins

Seed Your Database in Cypress

Productionize Your Database Seeder in Cypress

Assert on Database Snapshots in Cypress

Assert on XHR Requests in Cypress

Full End-To-End Testing in Cypress

Test Production Ready Apps with Cypress

In this lesson, we'll learn to test the seam between frontend and backend -- our XHR requests. Using cy.route as if we were mocking our backend requests, we can instead spy on the request, and intercept its data to run tests against. 

https://app.egghead.io/api/v1/lessons/cypress-assert-on-xhr-requests-in-cypress/subtitles

Instructor: [00:00] In this lesson, let's learn how to assert on XHR request. It starts with the cy.server. Typically, when we've used this in the past, it's because we were going to mark our backend request. In this case, we're not marking any request, but we do have to start the cy.server in order to use cy.route which will allow us to spy on and assert on the XHR request.

[00:26] Also, when we view cy.route in the past, it's been because we are returning response, but in this case, we're just not going to specify response. It's going to still hit the backend as it normally would.

[00:38] We will use an alias as we normally do. This will be our create to-do request. We need to get our new to-do input. We'll type into it first to-do, and we'll press enter.

[00:55] We'll do cy.wait, we'll wait for that create to-do request which will hit the real backend. Then we'll receive our XHR response, and we can make assertions on it here. Let's press debug so we can take a look at what that looks like.

[01:15] Here we see it. XHR is our subject. We see that there is a request object, which has a body and its headers, and the response object which has body and headers. What we can do here, we can say cy.wrap XHR.response.body, and then we can chain that as we normally would. We can say it should [inaudible] equal and then we'll give it one text.

[01:50] First to-do completed. False, that kind of thing, we can do the same thing for our request if we're interested or we could do it for our status code and say that the status should equal 201, which will be our created code. We can make both of those assertions and rerun this.

[02:23] That's it. That's how you assert on the XHR request.

Assert on XHR Requests in Cypress

Share this video with your friends

Course

Test Production Ready Apps with Cypress