Testing Defer Blocks in Angular with Cypress

What is Defer anyways?

Deferrable views are one of the brand new exciting features that shipped as part of Angular 17 last month as part of the new results improving the initial load size and time to paint.

You can see a super trivial example of this in action below:

@defer() {

  <p>inside defer</p>

}

The Background

Recently I came across for creating an issue with clear instructions for how to reproduce). After quickly replicating the issue I sought after a solution which ultimately inspired me to write this article.

You can download and follow along using

Though writing our first test was super simple you may notice that none of the blocks of code inside of our @defer() blocks are rendered in the DOM. Thankfully the Angular 17 shipped with some defer and render which will allow us to test our blocks of code that use defer(). Now that we have our new Cypress global commands setup we can revisit our spec file to finish adding tests for the uncovered scenarios.

Let's first update our first test to validate that we see the outside defer by default and that we do NOT see the other 2 paragraphs wrapped inside the defer blocks.

it('can mount', () => {

    cy.mount(AppComponent);

    cy.contains('p', 'outside defer');

    cy.contains('p', 'inside defer').should('not.exist');

    cy.contains('p', 'inside defer with condition').should('not.exist');

  });

command and call our new defer command which returns an array of DeferBlockFixtures. We can then use

Finally let's add a test for the second defer block that is tied to a

Conclusion

As you can see that testing defer with Cypress Component Testing is super simple with just a few simple commands. I am really just scratching the surface in this example but feel free to view the official documentation from Angular on how to test defer blocks for more details.