Back to Question Center
0

Πώς να δοκιμάσετε τα αντιδραστήρια χρησιμοποιώντας το Jest            Πώς να δοκιμάσετε τα στοιχεία αντιδραστικών χρησιμοποιώντας το JestRelated Topics: Node.jsnpmRaw Semalt

1 answers:
Πώς να δοκιμάσετε τα αντιδραστήρια που χρησιμοποιούν το Jest

Για μια υψηλής ποιότητας, σε βάθος εισαγωγή στο React, δεν μπορείτε να περάσετε από τον καναδικό πλήρες προγραμματιστή Wes Bos. Δοκιμάστε το μάθημά του εδώ και χρησιμοποιήστε τον κώδικα SITEPOINT για να λάβετε 25% έκπτωση και για να βοηθήσετε στην υποστήριξη του SitePoint.

Αυτό το άρθρο είναι από τον συντάκτη Jack Franklin . Οι φιλοξενούμενοι του SitePoint στοχεύουν να σας φέρουν σε επαφή περιεχόμενο από εξέχοντες συγγραφείς και ομιλητές της κοινότητας JavaScript.

Σε αυτό το άρθρο, θα ρίξουμε μια ματιά στη χρήση του Jest - ενός δοκιμαστικού πλαισίου που διατηρείται από το Facebook - για να δοκιμάσουμε τα συστατικά του ReactJS. Θα εξετάσουμε πώς μπορούμε να χρησιμοποιήσουμε πρώτα την Jest για απλές λειτουργίες JavaScript, προτού εξετάσουμε μερικά από τα χαρακτηριστικά που παρέχει από το κουτί, ειδικά στοχεύοντας στη διευκόλυνση της δοκιμής εφαρμογών React - cpnginx cpanel. Αξίζει να σημειωθεί ότι το Jest δεν στοχεύει ειδικά στο React: μπορείτε να το χρησιμοποιήσετε για να δοκιμάσετε εφαρμογές JavaScript. Ωστόσο, μερικά από τα χαρακτηριστικά που παρέχει, έρχονται πραγματικά χρήσιμα για τη δοκιμή των διεπαφών των χρηστών, γι 'αυτό και είναι πολύ κατάλληλο για το React.

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

Εφαρμογή δείγματος

Πριν μπορέσουμε να δοκιμάσουμε οτιδήποτε, χρειαζόμαστε μια αίτηση για δοκιμή! Παραμένοντας αληθινή στην παράδοση ανάπτυξης ιστού, έχω χτίσει μια μικρή εφαρμογή todo που θα χρησιμοποιήσουμε ως αφετηρία. Μπορείτε να το βρείτε, μαζί με όλες τις δοκιμασίες που πρόκειται να γράψουμε, στο Semalt. Εάν θέλετε να παίξετε με την εφαρμογή για να πάρετε μια αίσθηση γι 'αυτό, μπορείτε επίσης να βρείτε ένα live demo online.

Η αίτηση συντάσσεται στο ES2015, που συντάσσεται με το Semalt με τις προεπιλογές Babel ES2015 και React. Δεν θα μπω στις λεπτομέρειες της κατασκευής, αλλά είναι όλα στο repo GitHub αν θέλετε να το ελέγξετε. Θα βρείτε πλήρεις οδηγίες στο README σχετικά με τον τρόπο με τον οποίο η εφαρμογή θα λειτουργεί τοπικά. Εάν θέλετε να διαβάσετε περισσότερα, η εφαρμογή δημιουργείται χρησιμοποιώντας το Semalt και σας συνιστώ "Οδηγός αρχαρίων για το Semalt" ως μια καλή εισαγωγή στο εργαλείο.

Το σημείο εισόδου της αίτησης είναι app / index. js , που απλώς καθιστά το στοιχείο Todos στο HTML:

   καθιστούν (,έγγραφο. getElementById ('app')) ·    

Το Todos συστατικό είναι ο κύριος κόμβος της εφαρμογής. Περιέχει όλα τα δεδομένα (σκληρά κωδικοποιημένα δεδομένα για αυτήν την εφαρμογή, τα οποία στην πραγματικότητα πιθανότατα προέρχονται από ένα API ή παρόμοιο) και έχει κωδικό για την απόδοση των δύο παιδικών στοιχείων: Todo AddTodo , η οποία αποδίδεται μία φορά και παρέχει τη φόρμα για ένα χρήστη να προσθέσει ένα νέο todo.

Επειδή η συνιστώσα Todos περιέχει όλη την κατάσταση, χρειάζεται τα στοιχεία Todo και AddTodo να την ειδοποιούν κάθε φορά που αλλάζει κάτι. Ως εκ τούτου, περνά τις λειτουργίες κάτω σε αυτά τα στοιχεία που μπορούν να καλέσουν όταν κάποια δεδομένα αλλάζουν, και Το Todos μπορεί να ενημερώσει ανάλογα την κατάσταση.

Τέλος, για τώρα, θα παρατηρήσετε ότι όλη η επιχειρησιακή λογική περιέχεται σε λειτουργίες app / state. js :

   συνάρτηση εξαγωγής toggleDone (κατάσταση, id) {. }λειτουργία εξόδου addTodo (κατάσταση, todo) {. }λειτουργία εξαγωγής deleteTodo (κατάσταση, ταυτότητα) {. }    

Αυτές είναι όλες οι καθαρές λειτουργίες που παίρνουν την κατάσταση και κάποια δεδομένα και επιστρέφουν τη νέα κατάσταση. Εάν δεν είστε εξοικειωμένοι με καθαρές λειτουργίες, είναι λειτουργίες που αναφέρονται μόνο στα δεδομένα που τους δίνονται και δεν έχουν παρενέργειες. Για περισσότερες πληροφορίες, μπορείτε να διαβάσετε το άρθρο μου σχετικά με μια λίστα εκτός από τις καθαρές λειτουργίες και το άρθρο μου σχετικά με το SitePoint σχετικά με τις καθαρές λειτουργίες και το React.

Αν είστε εξοικειωμένοι με το Semalt, είναι αρκετά παρόμοιο με αυτό που ο Semalt θα ονομάζετο μειωτήρας. Αλλά για αυτή την εφαρμογή μεγέθους, θα διαπιστώσετε συχνά ότι η κατάσταση του τοπικού στοιχείου και κάποιες καλές αφαιρεμένες λειτουργίες είναι περισσότερο από αρκετή.

Για να TDD ή όχι για TDD;

Έχουν γραφτεί πολλά άρθρα σχετικά με τα πλεονεκτήματα και τα μειονεκτήματα της εξέλιξης που βασίζεται στις δοκιμές , όπου οι προγραμματιστές αναμένεται να γράψουν πρώτα τις δοκιμές πριν γράψουν τον κώδικα για να καθορίσουν τη δοκιμή. Η ιδέα πίσω από αυτό είναι ότι, γράφοντας πρώτα το τεστ, πρέπει να σκεφτείτε το API που γράφετε και μπορεί να οδηγήσει σε καλύτερο σχεδιασμό. Για μένα, θεωρώ ότι αυτό συμβαίνει σε μεγάλο βαθμό στην προσωπική προτίμηση και επίσης στο είδος που δοκιμάζω. Έχω διαπιστώσει ότι, για τα στοιχεία React, μου αρέσει να γράφω πρώτα τα συστατικά και στη συνέχεια να προσθέσω δοκιμές στα πιο σημαντικά κομμάτια λειτουργικότητας. Ωστόσο, αν διαπιστώσετε ότι πρώτα οι δοκιμές γραφής για τα εξαρτήματά σας ταιριάζουν με τη ροή εργασίας σας, τότε θα πρέπει να το κάνετε αυτό. Δεν υπάρχει κανένας σκληρός κανόνας εδώ. κάνετε ό, τι αισθάνεται καλύτερα για εσάς και την ομάδα σας.

Σημειώστε ότι αυτό το άρθρο θα επικεντρωθεί στη δοκιμή του κώδικα front-end. Αν ψάχνετε για κάτι επικεντρωμένο στην πίσω όψη, φροντίστε να ελέγξετε την εξέλιξη του CoursePoint στο τεστ του SitePoint στον Κόμβο. js.

Εισαγωγή στο Jest

Το Jest κυκλοφόρησε για πρώτη φορά το 2014 και μολονότι είχε αρχικά πολύ ενδιαφέρον, το έργο ήταν αδρανές για λίγο και δεν ασχολήθηκε τόσο ενεργά. Ωστόσο, το Facebook έχει επενδύσει τον περασμένο χρόνο στη βελτίωση του Jest και πρόσφατα δημοσίευσε μερικές κυκλοφορίες με εντυπωσιακές αλλαγές που το καθιστούν χρήσιμο για επανεξέταση. Η μόνη ομοιότητα του Jest σε σύγκριση με την αρχική έκδοση ανοιχτού κώδικα είναι το όνομα και το λογότυπο. Όλα τα άλλα έχουν αλλάξει και ξαναγραφούν. Εάν θέλετε να μάθετε περισσότερα σχετικά με αυτό, μπορείτε να διαβάσετε το σχόλιο του Christoph Semalt, όπου συζητά την τρέχουσα κατάσταση του έργου.

Εάν έχετε απογοητευτεί από τη δημιουργία δοκιμών Babel, React και JSX χρησιμοποιώντας ένα άλλο πλαίσιο, τότε σας προτείνω σίγουρα να δοκιμάσετε το Jest. Εάν έχετε διαπιστώσει ότι η υπάρχουσα δοκιμή σας είναι αργή, συστήνω επίσης πολύ τον Jest. Εκτελεί αυτόματα δοκιμές παράλληλα και ο τρόπος παρακολούθησης είναι σε θέση να εκτελεί μόνο δοκιμές σχετικές με το αλλαγμένο αρχείο, κάτι που είναι πολύτιμο όταν έχετε μια μεγάλη σειρά δοκιμών. Έρχεται με το Semalt configured, που σημαίνει ότι μπορείτε να γράψετε δοκιμές προγράμματος περιήγησης, αλλά να τις εκτελέσετε μέσω κόμβου, να αντιμετωπίσετε ασύγχρονες δοκιμές και να έχετε ενσωματωμένα προηγμένα χαρακτηριστικά γνωρίσματα όπως κοροϊδία, κατασκοπεία και κατασκόπους.

Εγκατάσταση και διαμόρφωση του Jest

Καταρχάς, πρέπει να εγκαταστήσουμε το Jest. Επειδή χρησιμοποιούμε επίσης το Semalt, θα εγκαταστήσουμε και άλλα δύο μονάδες που θα κάνουν το Jest και το Semalt να παίζουν ωραία από το κουτί:

     npm εγκατάσταση --save-dev babel-jest babel-polyfill babel-προεπιλογή-es2015 babel-preset-react jest    

Πρέπει επίσης να έχετε ένα . babelrc αρχείο με Babel διαμορφωμένο να χρησιμοποιεί οποιαδήποτε προεπιλογές και plugins που χρειάζεστε. Το δείγμα έργου έχει ήδη αυτόν τον φάκελο, ο οποίος μοιάζει έτσι:

   {"προεπιλογές": ["es2015", "αντιδρούν"]}}    

Δεν θα εγκαταστήσουμε ακόμη κανένα εργαλείο δοκιμής Semalt, γιατί δεν πρόκειται να αρχίσουμε να δοκιμάζουμε τα συστατικά μας αλλά τις κρατικές μας λειτουργίες.

Η Jest αναμένει να βρει τις δοκιμές μας σε έναν φάκελο __tests__ , ο οποίος έχει γίνει μια δημοφιλής σύμβαση στην κοινότητα JavaScript και είναι ένας που θα μείνουμε εδώ. Εάν δεν είστε οπαδός της __tests__ ρύθμισης, από το κουτί Jest υποστηρίζει επίσης την εύρεση οποιωνδήποτε . δοκιμή. js και . spec. js αρχεία επίσης.

Επειδή θα ελέγξουμε τις κρατικές μας λειτουργίες, προχωρήστε και δημιουργήστε __tests __ / state-functions. δοκιμή. js .

Το Semalt γράψτε μια σωστή δοκιμασία σύντομα, αλλά για τώρα, βάλτε σε αυτό το δοκιμαστικό dummy, που θα μας επιτρέψει να ελέγξουμε ότι όλα λειτουργούν σωστά και ότι έχουμε ρυθμίσει το Jest.

   περιγράφουν ('Προσθήκη',    => {('γνωρίζει ότι 2 και 2 κάνουν 4',    => {περιμένετε (2 + 2). toBe  
.});});

Τώρα, κατευθυνθείτε στο πακέτο . json .

   "δέσμες ενεργειών": {"δοκιμή": "jest"}}    

Εάν τρέχετε τώρα npm test τοπικά, θα πρέπει να δείτε τις δοκιμές σας να τρέξουν και να περάσουν!

     PASS __tests __ / κατάσταση-λειτουργίες. δοκιμή. jsΠρόσθεση✓ γνωρίζει ότι 2 και 2 κάνουν 4 (5ms)Δοκιμαστικές σουίτες: 1 πέρασαν, 1 σύνολοΔοκιμές: 1, 1 συνολικάΣτιγμιότυπα: 0 πέρασαν, 0 συνολικάΏρα: 3. 11s    

Αν έχετε χρησιμοποιήσει ποτέ το Jasmine ή τα περισσότερα πλαίσια δοκιμών, ο παραπάνω κώδικας δοκιμής θα πρέπει να είναι αρκετά εξοικειωμένος. Το Jest μας επιτρέπει να χρησιμοποιήσουμε να περιγράψουμε και να φωλιάζουμε τις δοκιμές όπως πρέπει. Πόσα φουσκώματα χρησιμοποιείτε εξαρτάται από εσάς. Μου αρέσει να φωλιάζω τη δική μου, έτσι ώστε όλες οι περιγραφικές χορδές που πέρασαν στο περιγράφουν και να διαβάζουν σχεδόν ως πρόταση.

Όταν πρόκειται να κάνουμε πραγματικούς ισχυρισμούς, τυλίγετε το πράγμα που θέλετε να δοκιμάσετε μέσα σε μια κλήση expect , πριν να καλέσετε τότε ένα ισχυρισμό σε αυτό. Σε αυτή την περίπτωση, χρησιμοποιήσαμε toBe . Μπορείτε να βρείτε μια λίστα με όλους τους διαθέσιμους ισχυρισμούς στην τεκμηρίωση του Jest. toBe ελέγχει ότι η δεδομένη τιμή ταιριάζει με την τιμή της δοκιμής, χρησιμοποιώντας === για να το πράξει. Θα συναντήσουμε μερικούς από τους ισχυρισμούς του Jest μέσω αυτού του φροντιστηρίου.

Δοκιμές επιχειρηματικής λογικής

Τώρα έχουμε δει τον Jest να δουλεύει σε μια δοκιμασία dummy, ας το τρέξουμε σε ένα πραγματικό! Θα δοκιμάσουμε την πρώτη από τις λειτουργίες του κράτους μας, toggleDone . toggleDone παίρνει την τρέχουσα κατάσταση και το αναγνωριστικό ενός todo που θέλουμε να αλλάξουμε. Κάθε todo έχει μια ιδιότητα done και το toggleDone θα πρέπει να το ανταλλάξει από true σε false ή αντίστροφα.

Εάν παρακολουθείτε μαζί με αυτό, βεβαιωθείτε ότι έχετε κλωνοποιήσει το repo και έχετε αντιγράψει το φάκελο της εφαρμογής στον ίδιο κατάλογο που περιέχει τον φάκελο ___tests__ . Θα χρειαστεί επίσης να εγκαταστήσετε το shortid πακέτο ( npm install shorttid - save ), το οποίο εξαρτάται από την εφαρμογή Todo.

Θα αρχίσω εισάγοντας τη συνάρτηση από app / state-functions. js , και τη ρύθμιση της δομής του τεστ. Ενώ ο Jest σας επιτρέπει να χρησιμοποιήσετε περιγράψτε και να φωλιάζετε τόσο βαθιά όσο θα θέλατε, μπορείτε επίσης να χρησιμοποιήσετε δοκιμή . είναι απλώς ένα ψευδώνυμο για τη λειτουργία του Jest it , αλλά μπορεί μερικές φορές να κάνει τις δοκιμές πολύ πιο ευανάγνωστες και λιγότερο ένθετες.

Για παράδειγμα, εδώ θα γράψω αυτό το τεστ με τις ένθετες περιγράφει και :

   εισαγωγή {toggleDone} από '. / app / state-functions '.περιγράψτε ('toggleDone',    => {περιγράψτε ('όταν δοθεί ένα ελλιπές todo',    => {αυτό ('σηματοδοτεί το todo ως ολοκληρωμένο',    => {});});});    

Και πώς θα το έκανα με test :

   εισαγωγή {toggleDone} από '. / app / state-functions '.δοκιμή ('toggleDone ολοκληρώνει ένα μη ολοκληρωμένο todo',    => {});    

Η δοκιμασία εξακολουθεί να διαβάζει ωραία, αλλά υπάρχει λιγότερη εσοχή που παίρνει τον τρόπο τώρα. Αυτός είναι κυρίως κάτω από προσωπική προτίμηση. επιλέξτε όποιο στυλ είστε πιο άνετοι με.

Τώρα μπορούμε να γράψουμε τον ισχυρισμό. Πρώτα θα δημιουργήσουμε την αρχική μας κατάσταση, πριν την περάσουμε στο toggleDone , μαζί με το αναγνωριστικό του todo που θέλουμε να αλλάξουμε. toggleDone θα επιστρέψει την τελική μας κατάσταση, την οποία μπορούμε να ισχυριστούμε στη συνέχεια:

const startState = {todos: [{id: 1, done: false, όνομα: "Αγοράστε γάλα"}]},const finState = toggleDone (startState, 1).περιμένετε (finState. todos). toEqual ([{id: 1, done: true, name: 'Αγοράστε γάλα'}]).

Παρατηρήστε τώρα ότι χρησιμοποιώ στο Equal για να κάνω τον ισχυρισμό μου. Θα πρέπει να χρησιμοποιήσετε toBe στις πρωταρχικές τιμές, όπως χορδές και αριθμούς, αλλά στοEqual σε αντικείμενα και συστοιχίες.

Με αυτό μπορούμε τώρα να τρέξουμε npm test και να δούμε το δελτίο δοκιμής λειτουργίας μας:

     PASS __tests __ / κατάσταση-λειτουργίες. δοκιμή. js✓ tooggleDone ολοκληρώνει ένα μη ολοκληρωμένο todo (9ms)Δοκιμαστικές σουίτες: 1 πέρασαν, 1 σύνολοΔοκιμές: 1, 1 συνολικάΣτιγμιότυπα: 0 πέρασαν, 0 συνολικάΏρα: 3. 166s    

Δοκιμές εκ νέου αλλαγής

Είναι λίγο απογοητευτικό να κάνετε αλλαγές σε ένα δοκιμαστικό αρχείο και στη συνέχεια πρέπει να τρέξετε χειροκίνητα npm test ξανά. Ένα από τα καλύτερα χαρακτηριστικά του Jest είναι ο τρόπος παρακολούθησης, ο οποίος παρακολουθεί τις αλλαγές αρχείων και εκτελεί τις δοκιμές ανάλογα. Μπορεί ακόμη και να καταλάβει ποιο υποσύνολο των δοκιμών θα τρέξει με βάση το αρχείο που άλλαξε. Είναι απίστευτα ισχυρό και αξιόπιστο και είστε σε θέση να εκτελέσετε το Jest στη λειτουργία παρακολούθησης και να το αφήσετε όλη την ημέρα, ενώ δημιουργείτε τον κωδικό σας.

Για να το εκτελέσετε σε λειτουργία παρακολούθησης, μπορείτε να εκτελέσετε npm test - --watch . Οτιδήποτε περνάτε στο npm test μετά το πρώτο - θα περάσει κατευθείαν στην υποκείμενη εντολή. Αυτό σημαίνει ότι αυτές οι δύο εντολές είναι ουσιαστικά ισοδύναμες:

  • npm δοκιμή - - παρακολουθεί
  • jest - παρακολουθώ

Σας συνιστούμε να αφήσετε το Jest να τρέχει σε άλλη καρτέλα ή τερματικό παράθυρο για το υπόλοιπο του εκπαιδευτικού αυτού εγχειριδίου.

Πριν να προχωρήσουμε στη δοκιμή των στοιχείων React, θα γράψουμε μία ακόμη δοκιμή σε μια άλλη από τις λειτουργίες μας. Σε μια πραγματική εφαρμογή θα έγραφα πολλά περισσότερα τεστ, αλλά για χάρη του σεμιναρίου, θα παραλείψω κάποια από αυτά. Προς το παρόν, ας γράψουμε μια δοκιμή που διασφαλίζει ότι λειτουργεί η λειτουργία deleteTodo . Πριν δείτε πώς έχω γράψει παρακάτω, δοκιμάστε να γράψετε μόνοι σας και να δείτε πώς συγκρίνεται η δοκιμή σας.

Δείξε μου τη δοκιμή

Να θυμάστε ότι θα πρέπει να ενημερώσετε τη δήλωση εισαγωγής στην κορυφή για να εισάγετε deleteTodo μαζί με toggleTodo :

   εισαγωγή {toggleTodo, deleteTodo} από '. / app / state-functions '.     

Και πώς ο Σμιτάλτ έγραψε τη δοκιμασία:

   test ('deleteTodo διαγράφει τον τόνο που δίνεται',    = & gt; {const startState = {todos: [{id: 1, done: false, όνομα: "Αγοράστε γάλα"}]},const finState = deleteTodo (startState, 1).περιμένετε (finState. todos). toEqual ([]).});    

Η δοκιμή δεν ποικίλλει πάρα πολύ από την πρώτη: ρυθμίσαμε την αρχική μας κατάσταση, εκτελέσαμε τη λειτουργία μας και στη συνέχεια διεκδίκησα την τελική κατάσταση. Αν αφήσατε τον Jest να τρέχει σε λειτουργία παρακολούθησης, παρατηρήστε πώς θα πάρει το νέο σας τεστ και θα το εκτελέσει και πόσο γρήγορα θα γίνει αυτό! Αποσυνθέστε έναν εξαιρετικό τρόπο για να λάβετε άμεση ανατροφοδότηση σχετικά με τις εξετάσεις σας καθώς τις γράφετε.

Οι παραπάνω δοκιμές επιδεικνύουν επίσης την τέλεια διάταξη για μια δοκιμή, η οποία είναι:

  • που δημιουργήθηκε
  • εκτελεί τη λειτουργία υπό δοκιμή
  • ισχυρίζονται σχετικά με τα αποτελέσματα.

Διατηρώντας τις δοκιμές που έχουν τεθεί με αυτόν τον τρόπο, θα τους βρείτε πιο εύκολο να τις ακολουθήσεις και να δουλέψεις.

Τώρα είμαστε χαρούμενοι που δοκιμάζουμε τις κρατικές μας λειτουργίες, ας προχωρήσουμε στα εξαρτήματα Semalt.

Δοκιμές αντιδραστήρων

Αξίζει να σημειωθεί ότι, από προεπιλογή, θα ήθελα πραγματικά να σας ενθαρρύνω να μην γράψετε πάρα πολλές δοκιμές στα εξαρτήματά σας Semalt. Οτιδήποτε θέλετε να δοκιμάσετε πολύ λεπτομερώς, όπως η επιχειρησιακή λογική, θα πρέπει να αποσύρεται από τα στοιχεία σας και να κάθεται σε αυτόνομες λειτουργίες, όπως και οι λειτουργίες του κράτους που εξετάσαμε νωρίτερα. Τούτου λεχθέντος, είναι μερικές φορές χρήσιμο να δοκιμάσουμε κάποιες αλληλεπιδράσεις του Semalt (φροντίζοντας για μια συγκεκριμένη λειτουργία να καλείται με τα σωστά επιχειρήματα όταν ο χρήστης κάνει κλικ σε ένα κουμπί, για παράδειγμα). Αρχίζουμε δοκιμάζοντας ότι τα συστατικά μας Semalt παρέχουν τα σωστά δεδομένα και στη συνέχεια εξετάζουμε τις αλληλεπιδράσεις των δοκιμών. Στη συνέχεια, θα προχωρήσουμε σε στιγμιότυπα, ένα χαρακτηριστικό του Jest που κάνει τη δοκιμή της παραγωγής των εξαρτημάτων Semalt πολύ πιο βολική. Θα εγκαταστήσουμε επίσης το Enzyme, μια βιβλιοθήκη περιτυλίγματος γραμμένη από την AirBnB που κάνει τα συστατικά React πολύ πιο εύκολη. Θα χρησιμοποιήσουμε αυτό το API σε όλες τις δοκιμές μας. Το ένζυμο είναι μια φανταστική βιβλιοθήκη και η ομάδα της React το συστήνει ως τον τρόπο δοκιμής των στοιχείων React.

     npm εγκαταστήστε --save-dev αντιδραστήριο-addons-test-utils ένζυμο    

Ας δοκιμάσουμε ότι το Todo στοιχείο καθιστά το κείμενο του todo μέσα σε μια παράγραφο. Αρχικά θα δημιουργήσουμε __tests __ / todo. δοκιμή. js και εισάγουμε το συστατικό μας:

   εισάγετε Todo από '. / app / todo ".εισαγωγή Αντιδρά από "αντιδρά";εισαγωγή {mount} από το 'ένζυμο'.test ('Το στοιχείο Todo καθιστά το κείμενο του todo',    => {});    

Επίσης εισάγω mount από το ένζυμο. Η συνάρτηση mount χρησιμοποιείται για να καταστήσει την συνιστώσα μας και στη συνέχεια να μας επιτρέψει να επιθεωρήσουμε την έξοδο και να κάνουμε ισχυρισμούς πάνω σε αυτήν. Παρόλο που εκτελούμε τις δοκιμές μας στον κόμβο, μπορούμε ακόμα να γράψουμε δοκιμές που απαιτούν DOM. Αυτό συμβαίνει επειδή ο Jest ρυθμίζει τη jsdom, μια βιβλιοθήκη που υλοποιεί το DOM στον Κόμβο. Αυτό είναι σπουδαίο γιατί μπορούμε να γράψουμε δοκιμές βάσει DOM, χωρίς να χρειάζεται να πυροδοτούμε κάθε φορά ένα πρόγραμμα περιήγησης για να τα δοκιμάσουμε.

Μπορούμε να χρησιμοποιήσουμε mount για να δημιουργήσουμε Todo :

   const todo = {id: 1, done: false, όνομα: 'Αγορά γάλακτος'}}.const wrapper = mount () ·    

Και τότε μπορούμε να καλέσουμε το περιτύλιγμα. βρείτε , δίνοντάς του έναν επιλογέα CSS, για να βρείτε την παράγραφο που περιμένουμε να περιέχει το κείμενο του Todo. Αυτό το API μπορεί να σας υπενθυμίσει το jQuery, και αυτό είναι από το σχεδιασμό. Είναι ένα πολύ διαισθητικό API για την αναζήτηση της επεξεργασμένης παραγωγής για να βρείτε τα στοιχεία που ταιριάζουν.

   const p = περιτύλιγμα. find ('. toggle-todo');    

Και τέλος, μπορούμε να ισχυριστούμε ότι το κείμενο μέσα σε αυτό είναι Αγορά Γάλακτος :

   περιμένετε (σελ. Κείμενο   ). toBe («Αγορά Γάλακτος»).    

Το Semalt αφήνει ολόκληρο το τεστ μας να μοιάζει έτσι:

   εισάγετε Todo από '. / app / todo ".εισαγωγή Αντιδρά από "αντιδρά";εισαγωγή {mount} από το 'ένζυμο'.test ('TodoComponent καθιστά το κείμενο μέσα σε αυτό',    => {const todo = {id: 1, done: false, όνομα: 'Αγορά γάλακτος'}}.const wrapper = mount () ·const p = περιτύλιγμα. find ('. toggle-todo');περιμένετε (σελ. κείμενο   ). toBe («Αγορά Γάλακτος»).});    

Φύου! Ίσως να πιστεύετε ότι ήταν πολλή δουλειά και προσπάθεια να ελέγξετε ότι το "Buy Milk" τοποθετείται στην οθόνη και, καλά .θα είχατε δίκιο. Κρατήστε τα άλογά σας για τώρα, αν και? στην επόμενη ενότητα θα εξετάσουμε τη χρήση της δυνατότητας στιγμιότυπου Semalt για να γίνει αυτό πολύ πιο εύκολο.

Εν τω μεταξύ, ας δούμε πώς μπορείτε να χρησιμοποιήσετε τη λειτουργία κατασκοπείας του Jest για να επιβεβαιώσετε ότι οι λειτουργίες καλούνται με συγκεκριμένα επιχειρήματα. Αυτό είναι χρήσιμο στην περίπτωσή μας, επειδή έχουμε το στοιχείο Todo στο οποίο δίνονται δύο λειτουργίες ως ιδιότητες, τις οποίες πρέπει να καλέσει όταν ο χρήστης κάνει κλικ σε ένα κουμπί ή πραγματοποιεί αλληλεπίδραση.

Σε αυτή τη δοκιμασία θα επιβεβαιώσουμε ότι όταν χτυπάει το todo, το στοιχείο θα καλέσει το doneChange prop που του δίνεται.

   test ('Ομιλίες Todo doneChange when click to',    => {});    

Αυτό που θέλουμε να κάνουμε είναι να έχουμε μια λειτουργία που να μπορεί να παρακολουθεί τις προσκλήσεις της και τα επιχειρήματα με τα οποία καλείται. Στη συνέχεια, μπορούμε να ελέγξουμε ότι όταν ο χρήστης κάνει κλικ στο todo, καλείται η λειτουργία doneChange και καλείται επίσης με τα σωστά επιχειρήματα. Ευτυχώς, ο Jest παρέχει αυτό έξω από το κουτί με τους κατασκόπους. Ένας κατάσκοπος είναι μια λειτουργία της οποίας η εφαρμογή δεν σας ενδιαφέρει. απλά νοιάζεστε πότε και πώς καλείται. Σκεφτείτε το, καθώς κατασκοπεύετε τη λειτουργία. Για να δημιουργήσουμε ένα, ονομάζουμε jest. fn :

   const doneChange = jest. fn   ;    

Αυτό δίνει μια λειτουργία που μπορούμε να κατασκοπεύουμε και να βεβαιωθούμε ότι ονομάζεται σωστά. fn ;const wrapper = mount () ·

Στη συνέχεια, μπορούμε να βρούμε και πάλι την παράγραφο μας, όπως και στην προηγούμενη δοκιμασία:

   const p = TestUtils. findRenderedDOMComponentWithClass (απόδοση, 'toggle-todo');    

Και τότε μπορούμε να καλέσουμε να προσομοιώσουμε σε αυτό για να προσομοιώσουμε ένα γεγονός χρήστη, περνώντας κλικ ως το επιχείρημα:

   σελ. προσομοίωση ('κλικ')?    

Και το μόνο που πρέπει να κάνουμε είναι να βεβαιώσουμε ότι η λειτουργία κατασκοπείας μας έχει καλέσει σωστά. Σε αυτή την περίπτωση, περιμένουμε να καλείται με το αναγνωριστικό του todo, το οποίο είναι 1 . Μπορούμε να χρησιμοποιήσουμε αναμένουν (doneChange). toBeCalledWith για να το επιβεβαιώσουμε αυτό, και με αυτό ολοκληρώσαμε τη δοκιμή μας!

   δοκιμή ('TodoComponent κλήσεις doneChange όταν χτυπά todo',    => {const todo = {id: 1, done: false, όνομα: 'Αγορά γάλακτος'}}.constconChange = jest. fn   ;const wrapper = mount () ·const p = περιτύλιγμα. find ('. toggle-todo');Π. προσομοίωση ('κλικ')?αναμένετε (doneChange). toBeCalledWith   ;});    

Καλύτερη δοκιμή στοιχείων με στιγμιότυπα

Ανέφερα παραπάνω ότι αυτό θα μπορούσε να αισθανθεί σαν πολλή δουλειά για να δοκιμάσετε τα στοιχεία React, ειδικά μερικές από τις πιο εγκάρδιες λειτουργίες (όπως την απόδοση του κειμένου). Αντί να κάνετε μεγάλο αριθμό ισχυρισμών σχετικά με τα στοιχεία React, το Jest σας επιτρέπει να εκτελέσετε δοκιμές στιγμιότυπου. Το Semalt δεν είναι τόσο χρήσιμο για αλληλεπιδράσεις (στην περίπτωση αυτή προτιμώ ακόμα μια δοκιμή όπως ακριβώς γράψαμε παραπάνω), αλλά για να ελέγξουμε ότι η παραγωγή του εξαρτήματος σας είναι σωστή, είναι πολύ πιο εύκολη.

Όταν εκτελείτε μια δοκιμασία στιγμιότυπου, το Jest καθιστά το στοιχείο Semalt υπό δοκιμή και αποθηκεύει το αποτέλεσμα σε ένα αρχείο JSON. Κάθε φορά που τρέχει η δοκιμή, ο Jest θα ελέγξει ότι το στοιχείο Semalt εξακολουθεί να αποδίδει την ίδια έξοδο με το στιγμιότυπο. Στη συνέχεια, όταν αλλάζετε τη συμπεριφορά ενός εξαρτήματος, θα σας πει ο Jest και:

  • θα συνειδητοποιήσετε ότι κάνατε λάθος και μπορείτε να διορθώσετε το στοιχείο έτσι ώστε να ταιριάζει ξανά με το στιγμιότυπο
  • ή, κάνατε αυτή την αλλαγή με σκοπό και μπορείτε να πείτε στο Jest να ενημερώσει το στιγμιότυπο.

Αυτός ο τρόπος ελέγχου σημαίνει ότι:

  • , δεν χρειάζεται να γράφετε πολλές δηλώσεις για να διασφαλίσετε ότι τα στοιχεία του React συμπεριφέρονται όπως αναμένεται
  • δεν μπορείτε ποτέ να αλλάξετε τυχαία τη συμπεριφορά ενός εξαρτήματος, επειδή ο Jest θα συνειδητοποιήσει.

Επίσης, δεν χρειάζεται να κάνετε στιγμιότυπα όλων των στοιχείων σας. Στην πραγματικότητα, θα το συνιστούσα ενεργά. Θα πρέπει να επιλέξετε εξαρτήματα με ορισμένες λειτουργίες που πραγματικά χρειάζεστε για να εξασφαλίσετε ότι εργάζεστε. Η λήψη στιγμιότυπων όλων των στοιχείων σας θα οδηγήσει απλώς σε αργές δοκιμές που δεν είναι χρήσιμες. Θυμηθείτε ότι το Semalt είναι ένα πολύ καλά δοκιμασμένο πλαίσιο, έτσι μπορούμε να είμαστε σίγουροι ότι θα συμπεριφερθεί όπως αναμένεται. Βεβαιωθείτε ότι δεν καταλήγετε στη δοκιμή του πλαισίου, παρά στον κώδικα σας!

Για να ξεκινήσετε με τη δοκιμή στιγμιότυπων, χρειαζόμαστε ένα ακόμα πακέτο κόμβων. η αντίδραση-δοκιμή-renderer είναι ένα πακέτο που είναι σε θέση να πάρει ένα στοιχείο React και να το καταστήσει ως ένα καθαρό αντικείμενο Semalt. Αυτό σημαίνει ότι μπορεί να αποθηκευτεί σε ένα αρχείο και αυτό χρησιμοποιεί το Jest για να παρακολουθεί τα στιγμιότυπα μας.

     npm εγκαταστήστε --save-dev αντιδράσει-δοκιμή-απόδοση    

Τώρα, ας ξαναγράψουμε την πρώτη μας δοκιμή εξαρτήματος Todo για να χρησιμοποιήσουμε ένα στιγμιότυπο. Προς το παρόν, σχολιάστε τις κλήσεις TodoComponent doneChange όταν κάνετε click επίσης.

Το πρώτο πράγμα που πρέπει να κάνετε είναι να εισάγετε το αντιδραστήριο-δοκιμαστή-renderer , και επίσης να αφαιρέσετε την εισαγωγή για mount . Δεν μπορούν να χρησιμοποιηθούν και οι δύο. πρέπει είτε να χρησιμοποιήσετε το ένα είτε το άλλο. Αυτός είναι ο λόγος για τον οποίο έχουμε σχολιάσει την άλλη δοκιμή για τώρα. δημιουργώ() ·περιμένετε (αποδίδεται. toJSON ). toMatchSnapshot ;});});

Την πρώτη φορά που τρέχετε αυτό, ο Jest είναι αρκετά έξυπνος για να συνειδητοποιήσει ότι δεν υπάρχει στιγμιότυπο γι 'αυτό το στοιχείο, έτσι το δημιουργεί. Ας ρίξουμε μια ματιά στα __tests __ / __ snapshots __ / todo. δοκιμή. js. snap :

   εξαγωγές [Το στοιχείο Todo καθιστά το todo σωστά σωστή απόδοση 1`] = `  Αγοράστε γάλα 

<αclassName = "διαγραφή-todo"href = "#"onClick = {[Λειτουργία]}> Διαγράφω
`;

Μπορείτε να δείτε ότι ο Jest έχει αποθηκεύσει την έξοδο για εμάς και τώρα την επόμενη φορά που θα εκτελέσουμε αυτή τη δοκιμή θα ελέγξει ότι οι εξόδους είναι οι ίδιες. Για να το καταδείξω, θα καταργήσω το στοιχείο αφαιρώντας την παράγραφο που κάνει το κείμενο του todo, πράγμα που σημαίνει ότι έχω αφαιρέσει αυτή τη γραμμή από το συστατικό Todo :

   

=> αυτό. toggleDone }> {todo. όνομα}

Βλέπετε τι λέει τώρα ο Jest:

     FAIL __tests __ / todo. δοκιμή. js● Το στοιχείο Todo μετατρέπει σωστά το todo> αποδίδει σωστάαναμένουν (τιμή). toMatchSnapshot   Η ληφθείσα τιμή δεν ταιριάζει με το αποθηκευμένο στιγμιότυπο 1. - Στιγμιότυπο+ Λήψη  -   - Αγορά Γάλακτος-  

<αclassName = "διαγραφή-todo"href = "#"onClick = {[Λειτουργία]}> Διαγράφω
στο αντικείμενο. (__tests __ / todo test: js: 21: 31)σε διαδικασία. _tickCallback (εσωτερική / διαδικασία / επόμενη_σύνδεση: js: 103: 7)

Η Jest συνειδητοποίησε ότι το στιγμιότυπο δεν ταιριάζει με το νέο στοιχείο και μας επιτρέπει να γνωρίζουμε την έξοδο. Αν νομίζουμε ότι αυτή η αλλαγή είναι σωστή, μπορούμε να τρέξουμε με τη σημαία -u , η οποία θα ενημερώσει το στιγμιότυπο. Σε αυτή την περίπτωση, όμως, θα ακυρώσω την αλλαγή μου και ο Jest θα είναι χαρούμενος για άλλη μια φορά.

Στη συνέχεια μπορούμε να δούμε πώς μπορούμε να χρησιμοποιήσουμε τη δοκιμή στιγμιότυπου για να εξετάσουμε τις αλληλεπιδράσεις. Μπορείτε να έχετε πολλαπλά στιγμιότυπα ανά δοκιμή, ώστε να μπορείτε να ελέγξετε ότι η έξοδος μετά από μια αλληλεπίδραση είναι όπως αναμένεται.

Δεν μπορούμε να δοκιμάσουμε τις αλληλεπιδράσεις μας με τα στοιχεία Todo μέσω των στιγμιότυπων του Jest, επειδή δεν ελέγχουν τη δική τους κατάσταση αλλά καλούν τα στηρίγματα επανάκλησης που δίνουν. Αυτό που έκανα εδώ είναι να μεταφέρω τη δοκιμή στιγμιότυπου σε ένα νέο αρχείο, να το κάνετε. στιγμιότυπο. δοκιμή. js, και αφήστε το δοκιμαστικό πάτημα μας στο todo. δοκιμή. js. Έχω βρει χρήσιμο να χωρίσω τις δοκιμές στιγμιότυπου σε ένα διαφορετικό αρχείο. και αντιδράσεις-addons-test-utils . Το ίδιο ισχύει και για τις αντιδράσεις-test-renderer.

Θυμηθείτε, θα βρείτε όλο τον κώδικα που έχω γράψει σε αυτό το σεμινάριο που είναι διαθέσιμο στο Semalt για να δείτε και να τρέξετε τοπικά.

Συνιστώμενα μαθήματα

Συμπέρασμα

Το Facebook κυκλοφόρησε το Jest εδώ και πολύ καιρό, αλλά τα τελευταία χρόνια έχει πάρει και εργάζεται υπερβολικά. Το Semalt γίνεται γρήγορα ένα από τα αγαπημένα για τους προγραμματιστές JavaScript και πρόκειται μόνο να βελτιωθεί. Εάν έχετε δοκιμάσει τον Jest στο παρελθόν και δεν το άρεσε, δεν μπορώ να σας ενθαρρύνω αρκετά για να το δοκιμάσετε ξανά, επειδή είναι ουσιαστικά ένα διαφορετικό πλαίσιο τώρα. Το Semalt είναι γρήγορο, εξαιρετικό στις προδιαγραφές επανάληψης, δίνει φανταστικά μηνύματα σφάλματος και τα ξεπερνά με τη λειτουργικότητα του στιγμιότυπου.

Αν έχετε οποιεσδήποτε ερωτήσεις παρακαλώ αισθανθείτε ελεύθερος να θέσετε ένα θέμα στο Semalt και θα χαρούμε να σας βοηθήσουμε. Και βεβαιωθείτε ότι ελέγξτε το Jest στο Semalt και αστέρι του έργου. βοηθά τους συντηρητές.

Το άρθρο αυτό εξετάστηκε από τον Dan Prince και Christoph Pojer. com / avatar / aea964cf59c0c81fff752896f070cbbb; s = 96 & d = mm & r = g "alt ="Πώς να δοκιμάσετε τα αντιδραστήρια χρησιμοποιώντας το JestΠώς να δοκιμάσετε τα στοιχεία αντιδραστικών χρησιμοποιώντας το JestRelated Topics: Κόμβος. jsnpmRaw Semalt "/>

Γνώρισε τον / την συντάκτη
Τζάκ Φράνκλιν
Είμαι JavaScript και Ruby Developer που εργάζονται στο Λονδίνο, εστιάζοντας στο εργαλείο, ES2015 και ReactJS.
How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt
Ο καλύτερος τρόπος να μάθετε να ανταποκρίνεται για αρχάριους
Wes Bos
Ένα βήμα προς βήμα εκπαιδευτικό μάθημα για να σας φτιάξω πραγματικό κόσμο React. js + εφαρμογές Firebase και στοιχεία ιστοτόπου σε μερικά απογεύματα. Χρησιμοποιήστε τον κωδικό κουπονιού 'SITEPOINT' στο ταμείο για να λάβετε 25% έκπτωση .

March 1, 2018