Πώς να ρυθμίσετε το Jest και το Enzyme για να δοκιμάσετε τις εφαρμογές React Native

Αυτό το σύντομο άρθρο μοιράζεται τις εμπειρίες μου σχετικά με τη ρύθμιση του περιβάλλοντος δοκιμών μου για τη δοκιμαστική μονάδα των στοιχείων React Native με Jest και Enzyme

Εργαλεία και περιβάλλον δοκιμών

Το πρώτο πράγμα που έμαθα ήταν η προσέγγιση και η υποδομή για τη σύνταξη δοκιμών μονάδας για μια εφαρμογή React Native είναι πολύ παρόμοια με τις δοκιμές μονάδας γραφής για μια εφαρμογή React… ίσως δεν αποτελεί έκπληξη.

Ωστόσο, ενώ τα εργαλεία και η χρήση των δοκιμαστικών σουιτών είναι πολύ παρόμοια, το περιβάλλον δοκιμών και η υποδομή πρέπει να ρυθμιστούν με ελαφρώς διαφορετικό τρόπο . Αυτό οφείλεται ουσιαστικά στο γεγονός ότι οι εφαρμογές React έχουν σχεδιαστεί για να λειτουργούν με το DOM μέσα σε ένα πρόγραμμα περιήγησης, ενώ οι εφαρμογές για κινητά δεν στοχεύουν αυτήν τη δομή δεδομένων για απόδοση (στοχεύουν πραγματικές «εγγενείς» λειτουργικές μονάδες που βρίσκονται στο σύστημα κινητής τηλεφωνίας).

Χρησιμοποιώντας το Jest

Το Jest είναι μια βιβλιοθήκη που χρησιμοποιείται για τον έλεγχο εφαρμογών JavaScript.

Ήθελα να χρησιμοποιήσω το Jest για διάφορους λόγους:

Πρώτον, δημιουργήθηκε και διατηρείται ενεργά από το Facebook για τις δικές τους εφαρμογές React Native.

Δεύτερον, έρχεται προσυσκευασμένο με την έκδοση του React Native με το οποίο δούλευα (δημιουργήθηκε με χρήση του react-native).

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

Χρησιμοποιώντας το Jest + Enzyme

Ήθελα να συνδυάσω το Jest και το Enzyme Υπάρχουν πολλά ελαφρώς συγκεχυμένα σχόλια στον Ιστό που συγκρίνουν το «Jest εναντίον του ενζύμου». Αυτό είναι λίγο παραπλανητικό. Ενώ το Jest είναι ένα πλαίσιο δοκιμών, μπορείτε να σκεφτείτε το Enzyme ως βιβλιοθήκη που διευκολύνει την επιλογή και την αναζήτηση στοιχείων εντός ενός προσομοιωμένου DOM. Επομένως , χρησιμοποιείται συχνά μαζί με το Jest για να κάνει τη γραφή τη λογική των δοκιμών καθαρότερη και ευκολότερη στην ανάγνωση.

Ακόμα μπερδεμένος? Είναι παρόμοιο με το πώς το jQuery εισήγαγε μια συνοπτική και σαφή σύνταξη για το ερώτημα και την επιλογή στοιχείων στο DOM, ενώ η σύνταξη που χρησιμοποιεί βανίλια JavaScript δεν ήταν (τουλάχιστον πίσω όταν το jQuery παρουσιάστηκε για πρώτη φορά) δεν ήταν τόσο σαφής και εύκολη στη χρήση. Και οι άνθρωποι δεν συγκρίνουν συχνά το «jQuery έναντι του JavaScript», εκτός εάν συγκρίνουν έναν συγκεκριμένο τρόπο που χρησιμοποιούν οι δύο προσεγγίσεις για να υποβάλουν ερώτημα και να τροποποιήσουν στοιχεία του DOM.

Σημείωση: μπορείτε να χρησιμοποιήσετε το Jest χωρίς ένζυμο (πιστεύω ότι το κάνει το Facebook), αλλά το Enzyme κάνει τις δοκιμές σας λίγο πιο εύκολο να δημιουργηθούν και να διαβαστούν. Από την άποψή μου, ο συνδυασμός του ενζύμου με το Jest αφορά την άνεση

Ρύθμιση Jest + Enzyme

Έπρεπε να περάσω μερικά στεφάνια για να δημιουργήσω επιτυχώς το Jest και το Enzyme στο περιβάλλον React Native.

Το Jest περιλαμβάνεται τώρα με εφαρμογές React Native που δημιουργήθηκαν χρησιμοποιώντας το εργαλείο "react-native". Έτσι θα μπορούσα να χρησιμοποιήσω το Jest έξω από το κουτί. Εκπληκτικός!

Αλλά αντιμετώπισα κάποια προβλήματα προσπαθώντας να συνδυάσω το Enzyme με το React Native χρησιμοποιώντας την τεκμηρίωσή τους. Ποτέ δεν έφτασα στο κάτω μέρος του υποκείμενου προβλήματος, αλλά συνέχισα να παίρνω λάθη «δεν βρέθηκαν μονάδες» όπως αυτό εδώ.

Μια λύση

Στο τέλος χρησιμοποίησα μια λύση που ουσιαστικά αφαιρεί μέρος της εγκατάστασης σε ένα προσυσκευασμένο περιβάλλον χρησιμοποιώντας τη βιβλιοθήκη jest-ένζυμο και έπειτα βεβαιωθήκαμε ότι η «προκαθορισμένη» αστεία είχε ρυθμιστεί ως «αντιδραστική-εγγενής» στο πακέτο μου.json.

Ακολούθησα τις οδηγίες για την εγκατάσταση αυτών των βιβλιοθηκών:

npm install jest-environment-enzyme jest-enzyme enzyme-adapter-react-16 --save-dev

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

npm install --save-dev react-dom enzyme

Εδώ έπρεπε να προσθέσω χειροκίνητα στο package.json:

// package.json before with react-native init { ... "jest": { "presets": ["react-native"], } ... } // package.json after my manual changes: { ... "jest": { "presets": ["react-native"], // not clear in documentation! "setupTestFrameworkScriptFile": "jest-enzyme", "testEnvironment": "enzyme", "testEnvironmentOptions": { "enzymeAdapter": "react16" } } ... }

Μπορείτε να δείτε το ρεπό εδώ.

Η χρήση της βιβλιοθήκης του jest-enzyme με αυτόν τον τρόπο λειτούργησε εύκολα για μένα και σήμαινε επίσης ότι είχα μια ελαφρώς καθαρότερη εγκατάσταση. Αυτό συμβαίνει επειδή η άλλη προσέγγιση (που δεν μπορούσα να εργαστώ, μετά την τεκμηρίωση του Enzyme) θα σήμαινε ότι έπρεπε επίσης να δημιουργήσω και να διατηρήσω ένα ξεχωριστό σενάριο «jest config».

Περίληψη

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

Ωστόσο, για την ευκολία χρήσης στη φάση «δοκιμαστική συγγραφή», πλήρωσα το τίμημα κατά τη δημιουργία της υποδομής και του περιβάλλοντος έτσι ώστε τα διάφορα εργαλεία να είναι συμβατά με το οικολογικό σύστημα React Native.

Επιπλέον, από την αντιμετώπιση προβλημάτων του Github σε αυτόν τον τομέα, φαίνεται ότι υπάρχουν πολλές μικρές αστάθειες μεταξύ των εκδόσεων React Native που καθιστούν πραγματικά δύσκολο να μάθουμε ποια είναι η υποκείμενη αιτία ενός προβλήματος υποδομής όπως αυτά που περιέγραψα παραπάνω. Υποθέτω όμως ότι δεν μπορούμε να έχουμε ευελιξία σε έναν τόσο γρήγορο χώρο όπως αυτό χωρίς κάποιες προκλήσεις.

Εδώ είναι το ρεπό με τη ρύθμιση του αστείου-ενζύμου μου με μερικά παραδείγματα δοκιμών.

Ελπίζω να βρήκατε αυτό το ενδιαφέρον και χρήσιμο! Μη διστάσετε να προσθέσετε τυχόν ερωτήσεις ή σχόλια παρακάτω.