Share
Jest è una libreria di test JavaScript aperta di Facebook. Il suo slogan è "Delightful JavaScript Testing". Mentre Jest può essere usato per testare qualsiasi libreria JavaScript, brilla quando si tratta di React and React Native.
Non è una sorpresa visto che sia React che Jest provengono da Facebook, che è uno dei principali utenti di entrambi. In questo tutorial ti mostrerò otto diversi aspetti di Jest che lo rendono un vero piacere per il test delle applicazioni React.
Jest è piuttosto semplice da installare da solo. Puoi semplicemente installarlo direttamente in un vuoto usando o npm o filato. Preferisco il filato. Vedi 6 cose che rendono il filato il miglior gestore di pacchetti JavaScript per capire perché. È semplice come:
filato aggiungere --dev jest
Se preferisci npm, digita:
npm installa --save-dev jest
Prima di testare, scriviamo un codice per testarlo. Ecco palindrome.js:
function isPalindrome (s) const count = s.length - 1 se count < 2 return true for (i = 0; i < (count + 1) / 2; ++i) if (s[i] !== s[count - i]) return false return true module.exports = isPalindrome
Ecco un test di prova in un file chiamato palindrome.test.js:
Accentsconagua
const isPalindrome = require ('./ palindrome') test ('rileva palindromes', () => expect (isPalindrome ('palindrome')). toBe (false) expect (isPalindrome (")). toBe (true) expect (isPalindrome ('a')). toBe (true) expect (isPalindrome ('gg')). toBe (true) expect (isPalindrome ('pop')). toBe (true) expect (isPalindrome ('1212') ) .toBe (falso))Per eseguire i test, aggiungere questo a package.json:
"script": "test": "jest"
Ora puoi eseguire i test con test del filato o test npm:
> filato test di prova run v1.1.0 warning package.json: nessun campo di licenza $ jest PASS ./palindrome.test.js ✓ rileva palindromi (6ms) Test Suites: 1 superato, 1 test totali: 1 superato, 1 istantanee totali: 0 total Time: 1.667s Funziona con tutte le suite di test. ✨ Fatto in 3.15s.
Questo è piuttosto semplice. Ma se usi react-create-app per creare il tuo progetto React, non devi nemmeno farlo. Il pacchetto jest viene fornito in bundle e puoi iniziare a scrivere immediatamente i test.
La gioia è veloce. Molto veloce. Quando i test sono vincolati alla CPU, è possibile dedicare un tempo significativo alle esecuzioni del test. Airbnb è passato da Mocha a Jest e il loro tempo di test totale è passato da più di 12 minuti a soli 4,5 minuti su una macchina di CI heavy-duty con 32 core. I test locali impiegavano 45 minuti, che scendevano a 14,5 minuti.
Cosa rende Jest così veloce? È una combinazione di diversi fattori:
Jest è dotato di riproduttori incorporati, spie e una propria libreria di derisione estesa. Era basato su Jasmine, quindi ha ereditato tutta la bontà di Jasmine. Ma nelle versioni più recenti Jest è partito da Jasmine, pur mantenendo le stesse funzionalità e aggiunto il proprio gusto e miglioramenti.
Confrontandolo con una soluzione di test su misura basata su Mocha, è chiaro che la facilità d'uso è una delle maggiori preoccupazioni del design di Jest.
Il mocking è una parte incredibilmente importante dei test unitari. Questo è particolarmente importante se ti preoccupi dei test veloci (e chi no?).
Mocking consente di sostituire le dipendenze non pertinenti che possono essere lente e persino il tempo di controllo per il codice che si basa sul tempo. Jest ti consente di controllare completamente le tue dipendenze e il tempo di master.
La dipendenza derisoria è una tradizione di lunga data dei test unitari. Se il tuo codice sta leggendo un file, scrivendo su un file, chiama qualche servizio remoto o accede a un database, potrebbe essere lento e potrebbe essere complicato configurare e ripulire dopo il test. Quando si corre in parallelo, potrebbe non essere nemmeno possibile controllarlo correttamente.
In questi casi, è meglio sostituire la dipendenza reale con una funzione fittizia che non fa altro che registrare il fatto che è stata chiamata, in modo da poter verificare il flusso di lavoro. Il jest.fn () La funzione mock ti consente di fornire valori di ritorno predefiniti (per più chiamate consecutive) e registra quante volte è stato chiamato e quali sono stati i parametri in ogni chiamata.
A volte potrebbe essere necessario sostituire un intero modulo con i suoi dati piuttosto che un paio di funzioni. Jest ti consente di farlo posizionando il tuo modulo con lo stesso nome in a __mocks__ sottodirectory.
Ogni volta che il tuo codice usa il modulo di destinazione, accederà al tuo simulatore piuttosto che al modulo reale. Puoi anche scegliere selettivamente alcuni test per utilizzare il modulo originale chiamando jest.Unmock ( 'moduleName').
Il tempismo è la rovina dei test unitari. Cosa succede se si desidera testare il codice che va in timeout dopo un minuto? Codice che spara ogni 30 secondi? Codice speciale che esegue un algoritmo di riconciliazione alla fine del mese?
Quelli sono difficili da testare. Puoi soccombere ai requisiti di temporizzazione del codice originale (e quindi i test saranno molto lenti), oppure puoi manipolare il tempo, che è molto più utile. Jest ti consente di controllare le seguenti funzioni correlate al timer:
Jest supporta pienamente le classi ES6 e offre vari modi per deriderle:
__mocks__ sottodirectory.mockImplementation () o mockImplementationOnce ().TypeScript è un popolare superset di JavaScript tipizzato che compila in un semplice JavaScript. Jest supporta TypeScript tramite il pacchetto ts-jest. Si descrive come un preprocessore TypeScript con supporto per la mappa di origine per Jest e ha una community molto attiva.
Jest ha rapporti di copertura integrati. I tuoi test sono validi solo come la loro copertura. Se provi solo l'80% del tuo codice, i bug nell'altro 20% verranno rilevati solo nella produzione.
A volte, ha senso dal punto di vista del business saltare i test per alcune parti del sistema. Ad esempio, gli strumenti interni utilizzati e modificati dai propri ingegneri esperti potrebbero non richiedere lo stesso livello di test rigorosi del codice di produzione. Ma, in ogni caso, questa dovrebbe essere una decisione consapevole, e dovresti essere in grado di vedere esattamente la copertura del test di diverse parti del tuo sistema.
Ecco come generare un report di copertura per l'esempio palindromo semplice:
> test del filato - copertine del filato run v1.1.0 warning.json: nessun campo di licenza $ jest "--coverage" PASS ./palindrome.test.js ✓ rileva palindromi (4ms) --------- ----- | ---------- | ---------- | ---------- | ---------- | File | % Stmts | % Filiale | % Funzioni | % Linee | -------------- | ---------- | ---------- | ---------- | - -------- | Tutti i file | 100 | 100 | 100 | 100 | palindrome.js | 100 | 100 | 100 | 100 | -------------- | ---------- | ---------- | ---------- | - -------- | Test Suite: 1 superato, 1 Test totali: 1 superato, 1 Istantanee totali: 0 Tempo totale: 1.712s Gestito tutte le suite di test. ✨ Fatto in 3.41s.
Il test delle istantanee è fantastico. Ti consente di catturare una stringa che rappresenta il componente sottoposto a rendering e memorizzarlo in un file. Quindi puoi confrontarlo in seguito per assicurarti che l'interfaccia utente non cambi. Sebbene sia ideale per le app React e React Native, è possibile utilizzare le istantanee per confrontare i valori serializzati di altri framework. Se cambi effettivamente l'interfaccia utente, devi aggiornare i tuoi file di istantanea per rispecchiarli, ovviamente.
Jest può essere eseguito in modalità orologio, dove esegue automaticamente i test ogni volta che si modifica il codice. Lo gestisci con --watchAll argomento della riga di comando e controllerà la tua applicazione per le modifiche. Ho eseguito scherzare in modalità orologio e ho introdotto un bug apposito su palindrome.js, ed ecco il risultato:
FAIL ./palindrome.test.js ✕ rileva palindromi (11 ms) ● rileva palindromi si aspetta (ricevuto) .toBe (atteso) // Oggetto.è uguaglianza Valore atteso per essere: true Ricevuto: falso 6 | expect (isPalindrome ('a')). toBe (true) 7 | expect (isPalindrome ('gg')). toBe (true)> 8 | expect (isPalindrome ('pop')). toBe (true) 9 | expect (isPalindrome ('1212')). toBe (false) 10 | ) 11 | all'oggetto..test (palindrome.test.js: 8: 30) Test Suite: 1 fallito, 1 test totali: 1 fallito, 1 istantanee totali: 0 tempo totale: 0.598s, 1s stimato su tutte le suite di test. Guarda l'uso: premi w per mostrare altro. Jest è un framework di test rapido che è facile da configurare. È attivamente sviluppato e utilizzato da Facebook per testare tutte le loro applicazioni React e molti altri sviluppatori e aziende.
Ha tutto ciò di cui hai bisogno in un unico comodo pacchetto, supporta TypeScript e IMO è l'opzione migliore per i test delle applicazioni React e React Native. È anche molto per migrare da altre soluzioni di test.
Ricorda, React è cresciuto in popolarità. In effetti, abbiamo un numero di articoli nel mercato Envato che sono disponibili per l'acquisto, la revisione, l'implementazione e così via. Se stai cercando risorse aggiuntive intorno a React, non esitare a verificarle.
