Δοκιμάστε τις βέλτιστες πρακτικές αντιδραστικών στοιχείων

από την React Developers @ Selleo

Η πιο δημοφιλής μέθοδος ελέγχου των συστατικών React είναι η χρήση είτε του Mocha + Chai + Enzyme είτε του Jest + Enzyme. Σε αυτό το άρθρο θα περιγράψουμε τις πρακτικές δοκιμής των συστατικών React με το Jest + Enzyme που ισχύουν επίσης για το Mocha + Chai.

Αν είστε νέοι για να δοκιμάσετε τα συστατικά React θα πρέπει να διαβάσετε επίσης:

  • create-react-app README στην ενότητα "Writing tests"
  • Jest - Ξεκινώντας
  • Enzyme API τεκμηρίωση

Οργάνωση δοκιμών

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

Η δοκιμή ελάχιστου στοιχείου επιβεβαιώνει την απόδοση του στοιχείου

Οι δοκιμές ελάχιστων στοιχείων επιβεβαιώνουν ότι το στοιχείο εκτελεί σωστά δοκιμές καπνού γνωστού τύπου ή "Δοκιμή επαλήθευσης κατασκευής". Μπορεί να γίνει με το ένζυμο:

ή στιγμιότυπο Jest:

Το τελευταίο δημιουργεί αρχείο __snapshots __ / MainSection.spec.js.snap.

Οι αλλαγές στα στιγμιότυπα επιβεβαιώνονται τοπικά μέσω του 'u' στο jest cli και δεσμεύονται στο git repository, οπότε ο αναλυτής PR μπορεί να τους δει. Μπορείτε να διαβάσετε περισσότερα για τη δοκιμή στιγμιότυπων

Προς το παρόν περιορίζουμε τη χρήση των στιγμιότυπων στην απόδοση συνιστωσών και τη σύνθετη εφαρμογή json (δηλ. Τις διαμορφώσεις διαγραμμάτων).

Εντάξει, δοκιμάζω τις αποδόσεις - τι άλλο πρέπει να δοκιμάσω;

Πρέπει να έχετε κατά νου ότι οι εξετάσεις είναι κάτι που πρέπει να γράψετε και να διατηρήσετε. Η σύνταξη καλών δοκιμών απαιτεί όσο το σκάφος δημιουργεί τον κώδικα εφαρμογής.

Οι δοκιμές είναι αυτοματοποιημένη διασφάλιση ποιότητας και τεκμηρίωση για προγραμματιστές. Όσο μεγαλύτερο είναι το έργο και η ομάδα, τόσο πιο λεπτομερείς δοκιμές χρειάζεστε.

Προσπαθήστε να σκεφτείτε το μέλλον που θα επιστρέψετε σε αυτό το στοιχείο ή θα το επαναπροσδιορίσετε - ποιες θα ήταν οι προσδοκίες σας από τις δοκιμές;

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

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

Η ρητή ρύθμιση () αντί της previousEach ()

Το πλεονέκτημα της χρήσης της ρητής συνάρτησης setup () είναι ότι σε κάθε δοκιμή είναι ξεκάθαρο πώς προετοιμάστηκε το στοιχείο. Το αντικείμενο ρύθμισης είναι επίσης καλό μέρος για να γαντζώσει κάποιες βοηθητικές λειτουργίες που αλληλεπιδρούν με το περιτύλιγμα, δηλ.

Δοκιμαστική συμπεριφορά

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

Μπορείτε να δείτε πώς setup () κάνει την εγγραφή αυτών των δοκιμών πολύ γρήγορα!

Χρησιμοποιήστε βοηθητικές λειτουργίες

Μερικές φορές πρέπει να γράψουμε πολλές παρόμοιες δοκιμές με μία μόνο μεταβλητή εισόδου να αλλάζει. Αυτό μπορεί να αντιμετωπιστεί με λειτουργία helper που δημιουργεί δοκιμή:

Διαβάζει πολύ κτύπημα και είναι ευκολότερο να διατηρηθεί.

Περίληψη

Πρακτικές που περιγράφονται σε αυτό το άρθρο:

  • θέστε τις δοκιμές κοντά στην υλοποίηση στον υποφάκελο __tests__
  • πάντα ξεκινήστε με την απλή δοκιμή ανίχνευσης συστατικών γνωστή ως δοκιμή καπνού, στη συνέχεια δοκιμάστε τη συμπεριφορά
  • σκεφτείτε το μέλλον να επιστρέψετε σε αυτό το συστατικό ή να το επαναπροσδιορίσετε
  • χρησιμοποιήστε τη ρητή ρύθμιση () και επιστρέψτε μαζί της τις κοινές μεταβλητές συντόμευσης
  • χρησιμοποιήστε βοηθητικές λειτουργίες που δημιουργούν δοκιμές

Ελπίζουμε ότι βρήκατε αυτό το άρθρο χρήσιμο. Μπορείτε να βρείτε τον λειτουργικό κώδικα παραδείγματος στην πινακίδα του κώδικα redux todomvc στη διεύθυνση https://github.com/tb/redux/tree/react-testing/examples/todomvc/src/components/__tests__