$30 off During Our Annual Pro Sale. View Details »

Testing in 2024: A "dynamic" Situation

Rainer Hahnekamp
November 09, 2024
73

Testing in 2024: A "dynamic" Situation

Mit der Modernisierung von Angular nimmt auch das Testumfeld Fahrt auf.

Karma tritt zugunsten des Web Test Runners zurück, während Jest offizielle Unterstützung erhält und Analog uns mit Vitest lockt. Playwright beansprucht den Spitzenplatz vor Cypress und was war da noch mit Jasmine?

Zeit für Klarheit!

Ich werde einen umfassenden Überblick über die Testlandschaft im Jahr 2024 geben – die aktuellen verfügbaren Tools hervorheben, zukünftige Entwicklungen prognostizieren und skizzieren, was eine zeitgemäße Teststrategie beinhaltet.

Modernes Angular braucht modernes Testing Tooling!

Rainer Hahnekamp

November 09, 2024
Tweet

Transcript

  1. About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io

    NgRx Team (Trusted Collaborator) • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality
  2. RainerHahnekamp Jeremy Elbourn: Angular Lead Angular Q&A Session September 2024

    As close to the real-world as practical. Services as Dependencies - Don't replace them - Try to come up with a fake - Last resort: Use a Mock
  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. ✅⛔Full Browser Support ⛔ Not Supported by Nx ⛔ Not so fast as others
  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 ✅ Nx Availability ✅⛔ Community-driven ⛔ Not that much used in Angular
  6. RainerHahnekamp Cypress ✅ Widely Used ✅ 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 ✅ #1 E2E Testing Framework ✅ Parallelization and

    Traceview out of the Box ✅ No Constraints due to "Outside-Browser Tests"
  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 ⛔ Minor Technical Constraints ⛔ Build Speed Playwright Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ⛔ Not Available Yet ⛔ Experimental/Status Unclear
  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 • Nx & Karma ◦ https://github.com/nrwl/nx/issues/19770 • 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