Essere in grado di testare componenti e web-app sviluppati con React è un requisito sempre più importante per uno sviluppatore front-end. Ci sono strumenti e librerie che semplificano il processo di testing ma la curva di apprendimento può sembrare scoraggiante. “Da che parte devo cominciare per testare le mie web-app?” “Non mi è chiaro cosa devo testare (e cosa no) e come testarlo… “ “I miei attuali test falliscono continuamente e non mi aiutano nel prevenire la nascita di nuovi bug…” L’obbiettivo del corso è quello di fornire le informazioni di base, i principi e alcuni consigli dati dell’esperienza, per entrare nel mondo delle metodologie di testing. Testare le proprie web-app è molto più facile e profittevole di quanto si possa pensare. Questo corso serve ad oltrepassare gli ostacoli iniziali e a capire come trarre un vantaggio immediato dai test, non solo nel medio e lungo periodo.

Durante la giornata, vedremo tutti i test utili per una web-app sviluppata con React affrontando i casi tipici con i quali ci si scontra quotidianamente. Durante questo corso ti insegneremo:

• Le basi e i vantaggi delle principali tecniche di testing applicate a React
• Come testare in modo produttivo i propri componenti React
• Le best practice da seguire per scrivere test utili e duraturi
• Come testare i diversi flussi utente senza un back-end funzionante
• Come scrivere test end-to-end (E2E) efficaci
• Come integrare i test nei processi di sviluppo e di Continuous Integration

Andremo ad utilizzare Jest, React Testing Library, Cypress e tutti i loro plugin utili ad aumentare la produttività quotidiana e l’affidabilità dei test.

Alterneremo spiegazioni teoriche a sessioni di live coding, al termine del corso verrà rilasciato il codice sorgente di tutti gli esercizi, il materiale utilizzato per le spiegazioni ed altri materiali di approfondimento.

Argomenti

• Panoramica dei test
• Jest
  • i built-in matcher
  • creare un custom matcher
  • watch mode
  • JSDOM
• utilizzo di chrome-devtools per debuggare un test di Jest con i breakpoint
• React Testing Library
  • il confronto con Enzyme
  • cosa sono gli implementation detail
  • come testare quello che l’utente usa
  • come simulare eventi dell’utente
  • i provider
  • i testing hook
  • shallow rendering
• Mocking di funzioni e di moduli
• Cosa stiamo cercando di testare veramente?
  • il filo sottile tra unit testing ed integration testing
  • come e perchè rendere verboso un test
  • cosa è meglio evitare di testare
• Visual Regression Testing
• Snapshot testing: quando evitarli e quando sono utili
• Cos’è un test E2E
  • Automazione del browser
  • Pro e contro dei test E2E paragonati ai UI integration test
• Cypress
  • il Test Runner
  • attese automatiche
  • screenshot e video automatici
  • esecuzione asincrona
• Cypress come strumento di sviluppo, non solo di test
• Best practices
  • come identificare gli elementi in pagina
  • attese al posto delle pause, concetto di deterministic event
  • utilizzo corretto delle asserzioni
• Perchè mantenere i test il più semplici possibile
• Utilità per gli altri membri del team
  • convenzioni di naming e script dedicati
  • test di monitoraggio
• Utilizzo avanzato di cypress
  • comandi custom
• Visual Regression Testing per l’intera web-app
• Continuous Integration