[Cypress] Stub Network Requests in a Cypress Test

To keep our tests fast and easily repeatable, it makes sense to create many integration tests and fewer full end-to-end tests. In this lesson, we’ll see how to stub out network requests to create repeatable integration tests by ensuring our application runs in a known state for our tests.

For example if we want to test for the initial loading, how many initial data should get.

If we get doing like this, it actually point to the server, everytime we add one or remove one will affect the testing results.

    it('should have four initial todos', function () {
        cy.get('.todo-list > li')
            .should('have.length', 4);
    });

We can mock and control what data we will get for the endpoint:

    it('should have four initial todos', function () {
        cy.server();
        cy.route('GET', '/api/todos', [
            {id: 1, name: 'one', isComplete: false},
            {id: 2, name: 'two', isComplete: false},
            {id: 3, name: 'three', isComplete: false},
            {id: 4, name: 'four', isComplete: false}
        ]);

        cy.visit('/');

        cy.get('.todo-list > li')
            .should('have.length', 4);
    });

So now no matter we add one or remove one todo from the list, each time tests run will have the same result.