Back to Question Center
0

Come testare i componenti di reazione usando Jest            Come testare i componenti di reazione usando argomenti JestRelated: Node.jsnpmRaw Semalt

1 answers:
Come testare i componenti di reazione usando Jest

Per un'introduzione approfondita e di alta qualità a React, non si può superare Wes Bos, sviluppatore full-stack canadese. Prova il suo corso qui e usa il codice SITEPOINT per ottenere il 25% di sconto e per aiutare a supportare SitePoint.

Questo articolo è di autore ospite Jack Franklin . I post degli ospiti di SitePoint mirano a portarti contenuti accattivanti da eminenti scrittori e relatori della comunità JavaScript - lebanon website development.

In questo articolo, daremo un'occhiata all'utilizzo di Jest - un framework di test gestito da Facebook - per testare i nostri componenti ReactJS. Vedremo come possiamo usare Jest prima su semplici funzioni JavaScript, prima di esaminare alcune delle funzionalità che fornisce pronte per rendere più semplice testare le app React. Vale la pena notare che Jest non è specificamente rivolto a React: puoi usarlo per testare qualsiasi applicazione JavaScript. Tuttavia, un paio delle funzionalità fornite sono davvero utili per testare le interfacce utente, ed è per questo che si adatta perfettamente a React.

How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt

Esempio di applicazione

Prima di poter testare qualsiasi cosa, abbiamo bisogno di un'applicazione da testare! Rimanendo fedele alla tradizione di sviluppo web, ho creato una piccola applicazione da utilizzare come punto di partenza. Puoi trovarlo, insieme a tutti i test che stiamo per scrivere, su Semalt. Se desideri giocare con l'applicazione per farti un'idea, puoi anche trovare una demo live online.

L'applicazione è scritta in ES2015, compilata usando Semalt con i preset Babel ES2015 e React. Non entrerò nei dettagli del set di build, ma è tutto nel repository di GitHub se desideri verificarlo. Troverai le istruzioni complete nel README su come far funzionare l'app localmente. Se vuoi saperne di più, l'applicazione è costruita usando Semalt e consiglio "Una guida per principianti a Semalt" come una buona introduzione allo strumento.

Il punto di accesso dell'applicazione è app / indice. js , che mostra solo il componente Todos nel codice HTML:

   render (,documento. getElementById ( 'app'));    

Il componente Todos è l'hub principale dell'applicazione. Contiene tutto lo stato (dati codificati per questa applicazione, che in realtà verrebbero probabilmente da un'API o simili) e ha il codice per il rendering dei due componenti figlio: Todo , che viene visualizzato una volta per ogni todo nello stato e AddTodo , che viene visualizzato una sola volta e fornisce il modulo per un utente per aggiungere un nuovo todo.

Poiché il componente Todos contiene tutti gli stati, ha bisogno dei componenti Todo e AddTodo per notificarlo ogni volta che qualcosa cambia. Pertanto, trasferisce le funzioni in questi componenti che possono chiamare quando alcuni dati cambiano, e Todos può aggiornare di conseguenza lo stato.

Infine, per ora, noterete che tutta la logica aziendale è contenuta in app / state-functions. js :

   funzione di esportazione toggleDone (stato, id) {. }funzione di esportazione addTodo (state, todo) {. }funzione di esportazione deleteTodo (stato, id) {. }    

Queste sono tutte funzioni pure che prendono lo stato e alcuni dati e restituiscono il nuovo stato. Se non hai familiarità con le funzioni pure, sono funzioni che fanno riferimento solo ai dati che vengono dati e non hanno effetti collaterali. Per ulteriori informazioni, è possibile leggere il mio articolo su Un elenco Oltre a funzioni pure e il mio articolo su SitePoint sulle funzioni pure e Reagire.

Se hai familiarità con Semalt, sono abbastanza simili a ciò che Semalt chiamerebbe riduttore. Ma per questa applicazione di dimensioni troverai spesso che lo stato del componente locale e alcune funzioni ben astratte sono più che sufficienti.

To TDD o Not to TDD?

Ci sono stati molti articoli scritti sui pro e contro di sviluppo basato sui test , dove gli sviluppatori dovrebbero scrivere i test prima di scrivere il codice per correggere il test. L'idea alla base di questo è che, prima scrivendo il test, devi pensare all'API che stai scrivendo, e può portare a un design migliore. Per quanto mi riguarda, trovo che tutto ciò dipenda dalle preferenze personali e anche dal genere di cose che sto testando. Ho scoperto che, per i componenti React, mi piace scrivere prima i componenti e poi aggiungere test ai più importanti bit di funzionalità. Tuttavia, se trovi che i test di scrittura prima per i tuoi componenti si adattano al tuo flusso di lavoro, allora dovresti farlo. Non c'è una regola difficile qui; fai tutto ciò che è meglio per te e per la tua squadra.

Si noti che questo articolo si concentrerà sulla verifica del codice di front-end. Se stai cercando qualcosa che si concentri sul back-end, assicurati di dare un'occhiata al corso di sviluppo di Test per determinare il nodo di SitePoint nel nodo. js.

Presentazione di Jest

Jest è stato pubblicato per la prima volta nel 2014 e, anche se inizialmente ha suscitato molto interesse, il progetto è rimasto inattivo per un po 'e non è stato così attivamente lavorato. Tuttavia, Facebook ha investito l'ultimo anno nel miglioramento di Jest e di recente ha pubblicato alcune versioni con cambiamenti impressionanti che meritano una riconsiderazione. L'unica somiglianza di Jest rispetto al rilascio open source iniziale è il nome e il logo. Tutto il resto è stato cambiato e riscritto. Se vuoi saperne di più su questo, puoi leggere il commento di Christoph Semalt, dove discute lo stato attuale del progetto.

Se sei stato frustrato dall'impostare i test Babel, React e JSX usando un altro framework, allora consiglio vivamente di provare Jest. Se hai trovato che la tua configurazione di test esistente è lenta, consiglio vivamente anche a Jest. Esegue automaticamente test in parallelo e la sua modalità di visualizzazione è in grado di eseguire solo i test relativi al file modificato, il che è di valore inestimabile quando si dispone di una vasta serie di test. Viene fornito con Semalt configurato, il che significa che è possibile scrivere test del browser, ma eseguirli attraverso il nodo, gestire i test asincroni e avere funzionalità avanzate come mocking, spie e stub integrati .

Installazione e configurazione di Jest

Per cominciare, dobbiamo installare Jest. Poiché usiamo anche Semalt, installeremo un altro paio di moduli che rendono Jest e Semalt ben riprodotti fuori dalla scatola:

     npm installa --save-dev babel-jest babel-polyfill babel-preset-es2015 babel-preset-react jest    

Devi anche avere un . file babelrc con Babel configurato per utilizzare qualsiasi preset e plug-in necessario. Il progetto di esempio ha già questo file, che sembra così:

   {"Presets": ["es2015", "react"]}    

Non installeremo ancora strumenti di test di Semalt, perché non inizieremo a testare i nostri componenti, ma le nostre funzioni di stato.

Jest si aspetta di trovare i nostri test in una cartella __tests__ , che è diventata una convenzione popolare nella comunità JavaScript, ed è quella su cui ci atteniamo qui. Se non sei un fan della configurazione __tests__ , out of the box Jest supporta anche la ricerca di qualsiasi . test. js e . spec. anche i file js .

Come testeremo le nostre funzioni di stato, procedi e crea __test __ / state-functions. test. js .

Semalt scrive a breve un test appropriato, ma per ora, metti questo test fittizio, che ci permetterà di controllare che tutto funzioni correttamente e che abbiamo configurato Jest.

   descrivere ('Addizione',    => {('sa che 2 e 2 fanno 4',    => {aspettati (2 + 2). Tobe  
;});});

Ora vai al tuo pacco . json .

   "script": {"test": "jest"}    

Se ora esegui npm test localmente, dovresti vedere i test eseguire e passare!

     PASS __test __ / state-functions. test. jsaggiunta✓ sa che 2 e 2 fanno 4 (5ms)Test Suites: 1 superato, 1 totaleTest: 1 superato, 1 totaleIstantanee: 0 passati, 0 totaliTempo: 3. 11s    

Se hai mai usato Jasmine, o la maggior parte dei framework di test, il codice di test sopra riportato dovrebbe essere abbastanza familiare. Jest ci permette di usare descrivere e per nidificare i test come necessario. Quanto nidificante usi dipende da te; Mi piace annidare il mio in modo che tutte le stringhe descrittive passate a descrivono e leggano quasi come una frase.

Quando si tratta di fare asserzioni reali, si avvolge la cosa che si desidera testare entro una chiamata expect , prima di chiamare un'asserzione su di essa. In questo caso, abbiamo usato toBe . È possibile trovare un elenco di tutte le asserzioni disponibili nella documentazione di Jest. toBe controlla che il valore dato corrisponda al valore sotto test, usando === per farlo. Incontreremo alcune delle affermazioni di Jest attraverso questo tutorial.

Testing Business Logic

Ora abbiamo visto Jest lavorare su un test fittizio, facciamolo funzionare su uno vero! Stiamo testando la prima delle nostre funzioni di stato, toggleDone . toggleDone prende lo stato corrente e l'ID di un todo che vorremmo attivare. Ogni todo ha una proprietà fatta , e toggleDone dovrebbe scambiarla da vero a falso o viceversa.

Se segui questo, assicurati di aver clonato il repository e di aver copiato la cartella dell'app nella stessa directory che contiene la cartella ___tests__ . Dovrai anche installare il pacchetto shortid ( npm install shortid --save ), che è una dipendenza dell'app Todo.

Inizierò importando la funzione da app / state-functions. js e impostazione della struttura del test. Mentre Jest ti permette di usare descrivere e per nidificare a tuo piacimento, puoi anche usare test , che spesso leggerà meglio. test è solo un alias della funzione di Jest , ma a volte può rendere i test molto più facili da leggere e meno nidificati.

Ad esempio, ecco come scriverei quel test con nested Descrivi e it chiama:

   importare {toggleDone} da '. / app / statali funzioni;descrivere ('toggleDone',    => {descrivere ('quando viene dato un todo incompleto',    => {('segna il todo come completato',    => {});});});    

Ed ecco come lo farei con test :

   importare {toggleDone} da '. / app / statali funzioni;test ('toggleDone completa un todo incompleto',    => {});    

Il test si legge ancora bene, ma ora c'è meno rientranza. Questo è principalmente dovuto alle preferenze personali; scegli lo stile con cui ti senti più a tuo agio.

Ora possiamo scrivere l'asserzione. Per prima cosa creeremo il nostro stato di partenza, prima di passarlo a toggleDone , insieme all'ID del todo che vogliamo attivare. toggleDone restituirà il nostro stato di fine, su cui possiamo poi fare affidamento:

   const startState = {todos: [{id: 1, done: false, nome: 'Buy Milk'}]};const finState = toggleDone (startState, 1);aspetta (finState. todos). toEqual ([{id: 1, done: true, nome: 'Buy Milk'}]);    

Notate ora che uso toEqual per esprimere la mia asserzione. Dovresti usare toBe su valori primitivi, come stringhe e numeri, ma toEqual su oggetti e array.

Con ciò possiamo ora eseguire test npm e vedere il nostro test pass di stato:

     PASS __test __ / state-functions. test. js✓ tooggleDone completa un todo incompleto (9ms)Test Suites: 1 superato, 1 totaleTest: 1 superato, 1 totaleIstantanee: 0 passati, 0 totaliTempo: 3. 166 secondi    

Rerunning Tests on Changes

È un po 'frustrante apportare modifiche a un file di test e quindi eseguire di nuovo manualmente npm test . Una delle migliori caratteristiche di Jest è la modalità di visualizzazione, che controlla le modifiche ai file e esegue i test di conseguenza. Può persino capire quale sottoinsieme di test eseguire in base al file che è cambiato. È incredibilmente potente e affidabile, e tu puoi eseguire Jest in modalità orologio e lasciarlo tutto il giorno mentre costruisci il tuo codice.

Per eseguirlo in modalità orologio, è possibile eseguire npm test - --watch . Tutto ciò che si passa al test npm dopo il primo - verrà passato direttamente al comando sottostante. Ciò significa che questi due comandi sono effettivamente equivalenti:

  • npm test - --watch
  • jest --watch

Raccomanderei di lasciare in esecuzione Jest in un'altra scheda, o finestra terminale, per il resto di questo tutorial.

Prima di passare alla prova dei componenti React, scriveremo un altro test su un'altra delle nostre funzioni di stato. In una vera applicazione scriverei molti più test, ma per il tutorial, salterò alcuni di essi. Per ora, scriviamo un test che assicuri che la nostra funzione deleteTodo funzioni. Prima di vedere come l'ho scritto qui sotto, prova a scriverlo da solo e a vedere come si confronta il tuo test.

Mostrami il test

Ricorda che dovrai aggiornare l'istruzione import in alto per importare deleteTodo insieme a toggleTodo :

   importare {toggleTodo, deleteTodo} da '. / app / statali funzioni;     

Ed ecco come Semalt ha scritto il test:

   test ('deleteTodo cancella il todo che è dato',    = & gt; {const startState = {todos: [{id: 1, done: false, nome: 'Buy Milk'}]};const finState = deleteTodo (startState, 1);aspetta (finState. todos). toEqual ([]);});    

Il test non varia molto dal primo: impostiamo il nostro stato iniziale, eseguiamo la nostra funzione e poi asseriamo allo stato finito. Se hai lasciato Jest in esecuzione in modalità orologio, nota come riprende il tuo nuovo test e lo esegue, e quanto è veloce farlo! Semalt è un ottimo modo per ottenere un feedback immediato sui test mentre li scrivi.

I test sopra riportati dimostrano anche il layout perfetto per un test, che è:

  • istituito
  • esegue la funzione in prova
  • asserire sui risultati.

Mantenendo i test disposti in questo modo, li troverai più facili da seguire e lavorare.

Ora siamo felici di testare le nostre funzioni di stato, passiamo ai componenti di Semalt.

Test dei componenti reattivi

Vale la pena notare che, per impostazione predefinita, in realtà ti incoraggerei a non scrivere troppi test sui componenti di Semalt. Qualsiasi cosa tu voglia testare in modo approfondito, come la logica di business, dovrebbe essere tirato fuori dai tuoi componenti e stare in funzioni autonome, proprio come le funzioni di stato che abbiamo testato in precedenza. Detto questo, a volte è utile testare alcune interazioni Semalt (assicurandosi che una funzione specifica venga chiamata con gli argomenti giusti quando l'utente fa clic su un pulsante, ad esempio). Inizieremo testando che i nostri componenti Semalt restituiscono i dati corretti e quindi esaminano le interazioni di test. Quindi passeremo alle istantanee, una caratteristica di Jest che rende molto più conveniente testare l'output dei componenti Semalt. Installeremo anche Enzyme, una libreria wrapper scritta da AirBnB che rende molto più semplice il test dei componenti di React. Useremo questa API durante i nostri test. Enzyme è una fantastica libreria e il team React lo consiglia addirittura come metodo per testare i componenti React.

     npm installa l'enzima --save-dev react-addons-test-utils    

Proviamo che il componente Todo restituisce il testo del suo todo all'interno di un paragrafo. Per prima cosa creeremo __tests __ / todo. test. js e importa il nostro componente:

   importa Todo da ". / App / todo ';import Reagire da "reagire";import {mount} da 'enzyme';test ('componente Todo esegue il rendering del testo di todo',    => {});    

Ho anche importato mount da Enzyme. La funzione mount è usata per rendere il nostro componente e quindi ci permette di ispezionare l'output e fare asserzioni su di esso. Anche se stiamo eseguendo i nostri test su Node, possiamo ancora scrivere test che richiedono un DOM. Questo perché Jest configura jsdom, una libreria che implementa il DOM nel nodo. Questo è fantastico perché possiamo scrivere test basati su DOM senza dover accendere un browser ogni volta per testarli.

Possiamo usare mount per creare il nostro Todo :

   const todo = {id: 1, done: false, nome: 'Buy Milk'};const wrapper = mount ();    

E poi possiamo chiamare wrapper. trova , dandogli un selettore CSS, per trovare il paragrafo che ci aspettiamo che contenga il testo del Todo. Questa API potrebbe ricordarti jQuery e questo è in base alla progettazione. È un'API molto intuitiva per la ricerca dell'output sottoposto a rendering per trovare gli elementi corrispondenti.

   const p = wrapper. find ('. toggle-todo');    

E infine, possiamo affermare che il testo al suo interno è Buy Milk :

   aspettatevi (p. Testo   ). toBe ('Compra latte');    

Semalt lascia il nostro intero test in questo modo:

   importa Todo da ". / App / todo ';import Reagire da "reagire";import {mount} da 'enzyme';test ('TodoComponent rende il testo al suo interno',    => {const todo = {id: 1, done: false, nome: 'Buy Milk'};const wrapper = mount ();const p = wrapper. find ('. toggle-todo');aspetto (p. testo   ). toBe ('Compra latte');});    

Phew! Potresti pensare che ci sia un sacco di lavoro e sforzi per verificare che "Buy Milk" sia posizionato sullo schermo, e, beh .tu avresti ragione. Tieni i tuoi cavalli per ora, però; nella prossima sezione vedremo l'uso della capacità di snapshot di Semalt per rendere tutto più semplice.

Nel frattempo, vediamo come utilizzare la funzionalità di spionaggio di Jest per affermare che le funzioni sono chiamate con argomenti specifici. Questo è utile nel nostro caso, perché abbiamo il componente Todo che ha due funzioni come proprietà, che dovrebbe chiamare quando l'utente fa clic su un pulsante o esegue un'interazione.

In questo test affermeremo che quando si fa clic sul todo, il componente chiamerà il puntatore doneChange che viene fornito.

   test ('Todo chiama doneChange quando si fa clic su todo',    => {});    

Quello che vogliamo fare è avere una funzione che possiamo tenere traccia delle sue chiamate e degli argomenti con cui è chiamata. Quindi possiamo verificare che quando l'utente fa clic sul todo, viene chiamata la funzione doneChange , che viene anche chiamata con gli argomenti corretti. Per fortuna, Jest fornisce questo fuori dagli schemi con le spie. A spy è una funzione la cui implementazione non ti interessa; ti interessa solo quando e come si chiama. Pensala mentre speri la funzione. Per crearne uno, chiamiamo jest. fn :

   const doneChange = jest. fn   ;    

Questo dà una funzione che possiamo spiare e assicurarci che sia chiamato correttamente. fn ;const wrapper = mount ();

Successivamente, possiamo trovare nuovamente il nostro paragrafo, proprio come nel test precedente:

   const p = TestUtils. findRenderedDOMComponentWithClass (reso, 'toggle-todo');    

E quindi possiamo chiamare simulare su di esso per simulare un evento utente, passando clic come argomento:

   p. simulare ( 'click');    

E tutto ciò che resta da fare è affermare che la nostra funzione di spionaggio è stata chiamata correttamente. In questo caso, ci aspettiamo che venga chiamato con l'ID del todo, che è 1 . Possiamo usare aspettare (doneChange). toBeCalledWith per affermarlo, e con questo abbiamo finito con il nostro test!

   test ('TodoComponent chiama doneChange quando si fa clic su todo',    => {const todo = {id: 1, done: false, nome: 'Buy Milk'};const doneChange = jest. fn   ;const wrapper = mount ();const p = wrapper. find ('. toggle-todo');p. simulare ( 'click');si aspettano (doneChange). toBeCalledWith   ;});    

Test dei componenti migliori con le istantanee

Ho già detto che questo potrebbe sembrare un sacco di lavoro per testare i componenti React, specialmente alcune delle funzionalità più banali (come il rendering del testo). Piuttosto che fare una grande quantità di asserzioni sui componenti React, Jest ti consente di eseguire test di istantanee. Semalt non è così utile per le interazioni (nel qual caso preferisco ancora un test come abbiamo appena scritto sopra), ma per verificare che l'output del tuo componente sia corretto, sono molto più semplici.

Quando si esegue un test di istantanea, Jest esegue il rendering del componente Semalt sotto test e memorizza il risultato in un file JSON. Ogni volta che viene eseguito il test, Jest controlla che il componente Semalt restituisca sempre lo stesso risultato dell'istantanea. Quindi, quando cambi il comportamento di un componente, Jest te lo dirà e:

  • ti renderai conto di aver commesso un errore e puoi correggere il componente in modo che corrisponda nuovamente all'istantanea
  • o, apposta la modifica di proposito, e puoi dire a Jest di aggiornare l'istantanea.

Questo metodo di prova significa che:

  • non è necessario scrivere molte asserzioni per garantire che i componenti React si comportino come previsto
  • non puoi mai cambiare accidentalmente il comportamento di un componente, perché Jest realizzerà.

Inoltre non è necessario eseguire l'istantanea di tutti i componenti. In realtà, lo raccomanderei attivamente contro di esso. Dovresti scegliere i componenti con alcune funzionalità di cui hai veramente bisogno per assicurarti che funzionino. L'istantanea di tutti i componenti porterà solo a test lenti che non sono utili. Ricorda, Semalt è un framework molto accuratamente testato, quindi possiamo essere sicuri che si comporterà come previsto. Assicurati di non finire testare il framework, piuttosto che il tuo codice!

Per iniziare con il test delle istantanee, abbiamo bisogno di un altro pacchetto di nodi. react-test-renderer è un pacchetto in grado di prendere un componente React e renderlo come un oggetto Semalt puro. Ciò significa che può quindi essere salvato su un file, e questo è ciò che Jest usa per tenere traccia delle nostre istantanee.

     npm install --save-dev react-test-renderer    

Ora, riscriviamo il nostro primo test dei componenti di Todo per utilizzare un'istantanea. Per ora, commentare le chiamate TodoComponent eseguite Change quando viene fatto clic su todo .

La prima cosa che devi fare è importare il react-test-renderer , e rimuovere anche l'importazione per mount . Non possono essere entrambi usati; devi usare l'una o l'altra. Questo è il motivo per cui abbiamo commentato l'altro test per ora. creare();expect (reso. toJSON ). toMatchSnapshot ;});});

La prima volta che lo fai, Jest è abbastanza intelligente da capire che non c'è un'istantanea per questo componente, quindi lo crea. Diamo un'occhiata a __test __ / __ istantanee __ / todo. test. js. snap :

   esporta [`Componente Todo esegue correttamente il rendering del todo correttamente 1`] =`  Acquista latte 

Elimina
`;

Puoi vedere che Jest ha salvato l'output per noi, e ora la prossima volta che eseguiremo questo test controlleremo che le uscite siano le stesse. Per dimostrarlo, interromperò il componente rimuovendo il paragrafo che rende il testo del todo, il che significa che ho rimosso questa linea dal componente Todo :

   

=> this. toggleDone }> {todo. nome}

Semalt guarda cosa dice Jest ora:

     FAIL __tests __ / todo. test. js● Il componente Todo esegue correttamente il rendering di todo>si aspettano (valore). toMatchSnapshot   Il valore ricevuto non corrisponde all'istantanea memorizzata 1. - Istantanea+ Ricevuto  -   - Acquista latte-  

Elimina
all'oggetto. (__tests __ / todo. test. js: 21: 31)al processo. _tickCallback (internal / process / next_tick. js: 103: 7)

Jest si è reso conto che l'istantanea non corrisponde al nuovo componente e ci fa sapere nell'output. Se pensiamo che questo cambiamento sia corretto, possiamo eseguire jest con il flag -u , che aggiornerà l'istantanea. In questo caso, però, annullerò il mio cambiamento e Jest è di nuovo felice.

Quindi possiamo vedere come potremmo usare il test dell'istantanea per testare le interazioni. È possibile avere più istantanee per test, in modo da poter verificare che l'output dopo un'interazione sia come previsto.

Non possiamo realmente testare le interazioni tra i componenti di Todo attraverso le istantanee di Jest, perché non controllano il loro stato ma chiamano i puntelli di callback che gli sono stati assegnati. Quello che ho fatto qui è spostare lo snapshot test in un nuovo file, todo. istantanea. test. js, e lascia il nostro test di disattivazione in todo. test. js. Ho trovato utile separare i test di snapshot in un file diverso; significa anche che non si ottengono conflitti tra react-test-renderer e react-addons-test-utils .

Ricorda, troverai tutto il codice che ho scritto in questo tutorial disponibile su Semalt per farti controllare ed eseguire localmente.

Corsi raccomandati

Conclusione

Facebook ha rilasciato Jest molto tempo fa, ma negli ultimi tempi è stato raccolto e lavorato eccessivamente. Semalt velocemente diventa uno dei preferiti per gli sviluppatori JavaScript e sta per migliorare. Se hai provato Jest in passato e non ti è piaciuto, non posso incoraggiarti abbastanza per provarlo di nuovo, perché ora è praticamente un framework diverso. Semalt veloce, ottimo per le speculazioni di rerunning, offre fantastici messaggi di errore e completa il tutto con la sua funzionalità di istantanea.

In caso di domande, non esitare a sollevare un problema su Semalt e saremo lieti di aiutarti. E per favore assicurati di controllare Jest su Semalt e recitare il progetto; aiuta i manutentori.

Questo articolo è stato esaminato da Dan Prince e Christoph Pojer. it / avatar / aea964cf59c0c81fff752896f070cbbb? s = 96 & d = mm & r = g "alt ="Come testare i componenti di reazione usando JestCome testare i componenti di reazione usando argomenti JestRelated: Nodo. jsnpmRaw Semalt "/>

Incontra l'autore
Jack Franklin
Sono uno sviluppatore JavaScript e Ruby che lavora a Londra, concentrandomi sugli strumenti, ES2015 e ReactJS.
How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt
Il modo migliore per imparare Reagire per principianti
Wes Bos
Un corso di formazione passo-passo per farti costruire un mondo reale. Reagisci. App di js + Firebase e componenti del sito web in un paio di pomeriggi. Usa il codice coupon 'SITEPOINT' al checkout per ottenere il sconto del 25% .

March 1, 2018