Test con React

In un mio articolo su cosenonjaviste.it ho fatto una piccola panoramica su React: nuovo tool di Facebook per la creazione di front-end web.

Come ho accennato nell’articolo introduttivo una delle caratteristiche fondanti di React è il virtual DOM. Tutte le operazioni sul DOM vengono fatte su un clone del DOM attuale che gira completamente in memoria, per poi applicare sul DOM reale solo le modifiche effettivamente necessarie. Questo meccanismo oltre ad avere un forte impatto sulle prestazioni ha un side effect interessante: il render dei componenti React viene effettuato da codice e mai tramite semplice markup.

Possiamo sfruttare questa caratteristica a nostro vantaggio per quanto riguarda il testing delle nostre applicazioni, infatti possiamo trasformare la maggior parte dei nostri test E2E in test unitari. Questo approccio ha diversi vantaggi, il primo è la minore complessità architetturale. Non abbiamo infatti bisogno di configurare alcun server Selenium per permettere ai nostri test di girare.

Come esempio analizzeremo questa piccola applicazione React: una todo list che sfrutta l’architettura Flux.

Todo-list

La nostra applicazione

I componenti principali di questa applicazioni sono:

  • Menu: utilizzato per passare dal List a Detail
  • Detail: form per inserire/modificare un todo
  • List: tabella contenente l’elenco dei todo con la possibilità di eliminarne uno cliccando sul pulsante ‘delete’

Durante questi test andremo a utilizzare la classica accoppiata Karma+Jasmine, ma nulla vieta di utilizzare altri framework di test. Iniziamo con una semplice suite di test che riguardano il componente Menu.

Come si può facilmente notare, il “cuore” del testing in React è l’oggetto TestUtils. In questo caso grazie a questo singleton possiamo effettuare il render del componente che vogliamo testare, e ricercare elementi all’interno del componente stesso. In questo caso specifico abbiamo utilizzato il metodo findRenderedDOMComponentWithTag che ritorna l’unico e solo elemento ul all’interno del componente Menu. In questo semplice caso abbiamo solo expectations sulla forma del componente, passiamo ora ad analizzare i test del componente List:

In questa suite di particolare interesse è l’ultimo test: tramite delle Action popoliamo la tabella di due record, simuliamo poi un click su uno dei pulsanti di ‘delete’ tramite il metodo Simulate.click e controlliamo che il numero di righe sia effettivamente diminuito di un’unità.

Nell’ultima suite di test, che riguarda il componente Detail, possiamo vedere come poter modificare il valore di un componente di input.

In questo caso utilizziamo il metodo Simulate.change per settare il valore dell’input che contiene il valore del todo corrente.

Conclusioni

Qui di seguito potete vedere l’output dei test che abbiamo analizzato in questo post:

React Test output

Report dei nostri test

Notate che le prestazioni sono paragonabili a quelli di qualsiasi test unitario, ma stiamo facendo dei test end-to-end a tutti gli effetti. Ovviamente per le parti più delicate dell’applicativo un vero test E2E può in ogni caso essere la soluzione migliore, ed è possibile (con qualche hack) utilizzare Protractor anche per applicazioni React.

Per quanto mi riguarda credo che i test con React siano il vero “WOW Effect!” di questo nuovo framework, potrebbe addirittura aprire la strada la strada al TDD per il markup. Tecnica che finora ho sempre considerato un miraggio data la complessità di scrittura e la scarsa velocità di esecuzione dei classici test E2E.

Per chi è a digiuno su Flux, sempre su cosenonjaviste potete leggere un mio post dove viene introdotto questo nuovo pattern architetturale.

Come al solito vi lascio con una canzone, questa volta tocca a Pyongyang dei Blur. Questa traccia è tratta dal loro ultimo album The Magic Whip. Buon Ascolto.

Vai a Spotify

Flattr this!

Pubblicato in Javascript, React Taggato con: , , ,
2 comments on “Test con React
  1. matteo scrive:

    bello! se ti interessa react ti potrà interessare anche la prima conf in italia su react!
    http://www.reactjsday.it a verona il 30 ottobre;-)

    • admin scrive:

      La mia azienda ha già preso un biglietto! Inoltre ieri ho fatto richiesta di partecipare come speaker proprio su questo argomento per il ReactJsDay! Speriamo di vederci lì! 🙂

1 Pings/Trackbacks per "Test con React"
  1. […] del tutto simile a quello che avviene con AngularJS ed altri framework simili. Infine sul mio blog trovate un articolo sul testing dei componenti React, l’esempio preso in considerazione è la […]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.