Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Testing Angular in 2024

Testing Angular in 2024

Slides of the talk at the This is Learning Conference about the current state of testing in Angular.

Rainer Hahnekamp

May 18, 2024
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

Transcript

  1. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff •

    Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
  2. RainerHahnekamp Pros and Cons Unit ✅ Fast ✅ Precise ✅

    Easy ⛔ Low Coverage ⛔ No Refactoring possible ⛔ High Maintenance Costs Integration (+Component) ✅ Good Coverage ✅ Refactoring possible ✅ Lower Maintenance Costs ⛔ Difficult to Write ⛔ Slower than Unit Test End-to-End ✅ Very Easy to Write ✅ Implementation Independent ✅ High Coverage ⛔ Hard to Identify Error ⛔ Challenges for CI Setup ⛔ Slow
  3. RainerHahnekamp Jasmine (Karma / Web Test Runner) ✅ Official Testing

    Solution ✅ Supported by Angular • No Issues with ESM • No Issue with Build Process • Used by Angular Material, Framework, etc. ✅ Not so fast as others ✅⛔Full Browser Support ⛔ Not Supported by Nx
  4. RainerHahnekamp Jest ✅ Major Testing Framework in JavaScript ✅ Parallelization

    Support ✅ "Affected Mode" ✅ Upcoming Official Support ✅⛔ Depends on Community Contributions ⛔ History of ESM Issues ⛔ Asynchronous Tasks harder than in Jasmine
  5. RainerHahnekamp Vitest ✅ Modern Testing Framework ✅ Based on Vite

    ✅ Faster than Jest ✅ Jest Compatibility ✅⛔ Support only via Analog ⛔ Not that much used in Angular
  6. RainerHahnekamp Cypress ✅ Most used E2E Framework ✅ Great Developer

    Experience ✅ Stable Tests ✅ Official Partner of Angular ⛔ Parallelization and Test Replay via Cypress Cloud ⛔ Minor Constraints due to "In-Browser Tests"
  7. RainerHahnekamp Playwright ✅ Future #1 E2E Testing Framework ✅ Parallelization

    and Traceview out of the Box ✅ No Contraints due to "Outside-Browser Tests" ⛔ Not an Official Partner of Angular
  8. RainerHahnekamp Testing Library ✅ Boosts Testing DX ✅ Enforces certain

    Testing Style ✅ Huge Ecosystem ✅⛔ Runs on top of Jasmine, Jest,... ⛔ No E2E DX Cypress Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ⛔ Minor Technical Constraints ⛔ Build Issues ⛔ Not Actively Maintained Playwright Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ✅⛔ Community Driven ⛔ Experimental
  9. RainerHahnekamp Further Reading • Martin Fowler ◦ https://martinfowler.com/articles/2021-test-shapes.html ◦ https://martinfowler.com/articles/mocksArentStubs.html

    • Guillermo Rauch ◦ https://twitter.com/rauchg/status/807626710350839808 • Kent Dodds ◦ https://kentcdodds.com/blog/write-tests • Spotify Blog ◦ https://engineering.atspotify.com/2018/01/testing-of-microservices/ • Ramona Schwerig ◦ https://www.smashingmagazine.com/2023/09/long-live-test-pyramid/ • Alex Rickabaugh ◦ https://github.com/angular/angular/issues/54438#issuecomment-1971813177 • Cypress Issue on improving Component Testing for Angular ◦ https://github.com/cypress-io/cypress/issues/26243 • Douglas Parker on official Jest Support ◦ https://github.com/angular/angular-cli/issues/25217#issuecomment-1581581005