Τα γραπτά τεστ μπορεί να είναι κουραστικά και επαναλαμβανόμενα. Μπορεί να αισθάνεστε ότι χάνετε πολύτιμο χρόνο που θα προτιμούσατε να χρησιμοποιήσετε για να εργαστείτε σε λειτουργίες. Ωστόσο, εάν θέλετε να στείλετε εφαρμογές για τις οποίες είστε σίγουροι, θα πρέπει να γράφετε δοκιμές.

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

Μπορείτε εύκολα να γράψετε δοκιμές στο React χρησιμοποιώντας το Jest και τη βιβλιοθήκη δοκιμών React.

Τι πρέπει να δοκιμάσετε στο React;

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

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

instagram viewer

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

Όταν αποφασίζετε τι να δοκιμάσετε, ένα πράγμα που πρέπει να έχετε κατά νου είναι να μην δοκιμάσετε ποτέ τη λειτουργικότητα που χειρίζεται το ίδιο το React. Για παράδειγμα, αντί να δοκιμάζετε την εγκυρότητα των props, μπορείτε να χρησιμοποιήσετε το React PropTypes.

Δοκιμή ενός στοιχείου κουμπιού

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

Δημιουργήστε ένα νέο αρχείο στο src κλήθηκε ο φάκελος Κουμπί.js και προσθέστε τον παρακάτω κώδικα.

λειτουργίαΚουμπί({αξία}) {
ΕΠΙΣΤΡΟΦΗ (
<κουμπί>{αξία}</button>
 )
}
εξαγωγήΠροκαθορισμένο Κουμπί

Το Button.js δέχεται ένα στήριγμα που ονομάζεται τιμή και το χρησιμοποιεί ως τιμή του κουμπιού.

Γράψτε το πρώτο σας τεστ

ΕΝΑ εφαρμογή δημιουργίας-αντίδρασης-εφαρμογής έρχεται προεγκατεστημένο με το Jest and the React Testing Library. Το Jest είναι μια ελαφριά βιβλιοθήκη δοκιμών με ενσωματωμένες λειτουργίες κοροϊδίας και διεκδίκησης. Λειτουργεί με πολλούς Πλαίσια JavaScript. Η βιβλιοθήκη δοκιμών React, από την άλλη πλευρά, παρέχει λειτουργίες που σας βοηθούν να ελέγξετε πώς αλληλεπιδρούν οι χρήστες με τα στοιχεία.

Δημιουργήστε ένα νέο αρχείο που ονομάζεται Button.test.js στον φάκελο src. Από προεπιλογή, το Jest προσδιορίζει αρχεία με επίθημα .test.js ως αρχεία δοκιμής και τα εκτελεί αυτόματα. Μια άλλη επιλογή είναι να προσθέσετε τα δοκιμαστικά σας αρχεία σε έναν φάκελο που ονομάζεται __τεστ__.

Προσθέστε τον ακόλουθο κώδικα στο Button.test.js για να δημιουργήσετε την πρώτη δοκιμή.

εισαγωγή { render } από '@testing-library/react';
εισαγωγή Κουμπί από '../Κουμπί';
περιγράφω('Εξάρτημα κουμπιού', () => { 
 δοκιμή('Αποδίδει το στοιχείο του κουμπιού χωρίς να κολλάει', () => {
 καθιστώ(<Κουμπί />);
 }); 
})

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

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

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

Χρήση ρόλων για την εύρεση του κουμπιού

Μερικές φορές θέλετε να ελέγξετε εάν το στοιχείο ήταν προσαρτημένο. Η μέθοδος οθόνης έχει μια συνάρτηση getByRole() που μπορείτε να χρησιμοποιήσετε για να αρπάξετε ένα στοιχείο από το DOM.

screen.getByRole('κουμπί')

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

Η getByRole() είναι ένα από τα πολλά ερωτήματα που μπορείτε να χρησιμοποιήσετε για να επιλέξετε στοιχεία σε ένα στοιχείο. Δείτε άλλους τύπους ερωτημάτων στο The React Testing Library's Οδηγός «Ποιο ερώτημα πρέπει να χρησιμοποιήσω». Επίσης εκτός από τον ρόλο του «κουμπιού», οι περισσότεροι σημασιολογικά στοιχεία HTML έχουν έμμεσους ρόλους που μπορείτε να χρησιμοποιήσετε για να εκτελέσετε τα ερωτήματά σας. Βρείτε τη λίστα με τους ρόλους από Έγγραφα MDN.

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

δοκιμή('Κουμπί απόδοσης χωρίς συντριβή', () => {
 καθιστώ(<Τιμή κουμπιού="Εγγραφείτε" />);
 περιμένω (screen.getByRole('κουμπί')).toBeInTheDocument()
});

Η αντιστοίχιση toBeInTheDocument() ελέγχει εάν το στοιχείο κουμπιού υπάρχει στο έγγραφο.

Αναμένετε ότι το κουμπί θα αποδοθεί σωστά

Το στοιχείο Button δέχεται μια τιμή prop και την εμφανίζει. Για να αποδοθεί σωστά, η τιμή που εμφανίζει πρέπει να είναι η ίδια με αυτή που δώσατε.

Δημιουργήστε ένα νέο μπλοκ δοκιμής και προσθέστε τον ακόλουθο κώδικα.

δοκιμή('Αποδίδει σωστά το κουμπί', () => {
 καθιστώ(<Τιμή κουμπιού="Σύνδεση" />);
 περιμένω (screen.getByRole('κουμπί')).toHaveTextContent("Σύνδεση")
})

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

afterEach (καθάρισμα)

Τώρα, η βιβλιοθήκη δοκιμών αποπροσαρτά τα στοιχεία αυτόματα μετά από κάθε απόδοση.

Δημιουργία δοκιμών στιγμιότυπου

Μέχρι στιγμής, έχετε δοκιμάσει τη συμπεριφορά του στοιχείου Button. Γράψτε δοκιμές στιγμιότυπου για να ελέγξετε εάν η έξοδος του στοιχείου παραμένει ίδια.

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

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

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

Θα χρησιμοποιήσετε τη μέθοδο renderer από το πακέτο react-test-renderer npm. Επομένως, εκτελέστε τον παρακάτω κώδικα για να το εγκαταστήσετε.

npm εγκαθιστώ αντιδρώ-δοκιμή-καθιστών

Στο Button.test.js, γράψτε τη δοκιμή στιγμιότυπου ως εξής:

δοκιμή('Στιγμιότυπο αγώνων', () => {
 const tree = renderer.create(<Τιμή κουμπιού="Σύνδεση" />).toJSON();
αναμένω(δέντρο).toMatchSnapshot();
})

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

Κουμπί
└─── __tests__
│ │ Κουμπί.δοκιμές.js
│ └─── __στιγμιότυπο__
│ │ Κουμπί.δοκιμή.js.θραύση
│ 
└─── Κουμπί.js

Τώρα, όταν εκτελέσετε την επόμενη δοκιμή, το React θα συγκρίνει το νέο στιγμιότυπο που δημιουργεί με το αποθηκευμένο.

Γράψτε δοκιμές για τα πιο χρησιμοποιούμενα εξαρτήματα

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

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