Τρόπος δοκιμής αντιδράσεων ιστότοπων και εφαρμογών

Sep 14, 2025

πως να

(Πιστωτική πίστωση: μέλλον)

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

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

Περιγραφή: περιγράφει τι είναι η δοκιμή
Χρήση / Render: χρησιμοποιεί το στοιχείο σε ένα περιβάλλον όπου μπορεί να δοκιμαστεί
Διακωμώδηση: δημιουργεί τις προσποιημένες λειτουργίες, ώστε να μπορείτε να ελέγξετε τις υποθέσεις σας

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

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

01. Ξεκινήστε με τη βιβλιοθήκη δοκιμών αντιδράσεων

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

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

npx create-react-app netmag-javascript-testing

02. Αποφασίστε τι να δοκιμάσετε

Φανταστείτε ότι έχουμε ένα απλό στοιχείο, πείτε ένα κουμπί με κάποια κατάσταση. Ποια είναι μερικά από τα πράγματα που χρειάζονται δοκιμή σε ένα στοιχείο όπως αυτό;

● Η εμφάνιση του στοιχείου:

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

● Τα διαφορετικά κλαδιά που καθιστούν:

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

● Ότι οι λειτουργίες καλούνται όπως αναμένεται:

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

03. Γράψτε την πρώτη δοκιμή σας

Ας γράψουμε την πρώτη μας δοκιμή. Δημιουργήστε ένα νέο αρχείο που ονομάζεται Mycomponent.unit.test.js στον ίδιο φάκελο με το στοιχείο. Προσθέτοντας test.js στο τέλος, θα επιλεγεί αυτόματα από τη βιβλιοθήκη δοκιμών. Τα περιεχόμενα αυτού του αρχείου είναι παρακάτω:

 Η εισαγωγή αντιδρά από το 'αντιδράσει'
Εισαγωγή {render} από '@ δοκιμή-βιβλιοθήκη / αντιδράστε'
να εισαγάγει τον κλεμαντικό μου από το './myComponent'
περιγράψτε ('το & lt; mycomponent / & gt;', () = & gt; {
    // δοκιμές πηγαίνουν εδώ
})

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

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

04. Χρησιμοποιήστε τη λειτουργία καθαρισμού

Ας εισαγάγουμε μια βοηθητική λειτουργία που ονομάζεται που θα αυξηθεί () . Πρέπει να το χρησιμοποιήσουμε, επειδή κάθε φορά που κάνουμε κάτι με το στοιχείο, θέλουμε ένα νέο αντίγραφο χωρίς τα στηρίγματα που είχαμε προηγουμένως να περάσει σε αυτό που εξακολουθεί να υπάρχει στο στοιχείο. Ή ίσως χρειαστεί να επανεξετάσουμε το στοιχείο: που θα αυξηθεί () Μήπως αυτό για εμάς και μπορούμε να το περάσουμε τη λειτουργία καθαρισμού.

 Εισαγωγή {render, cleanup} από '@ δοκιμή-βιβλιοθήκη / αντιδράστε'
...
περιγράψτε («το στοιχείο πρέπει να κάνει», () = & gt; {
  που θα αυξηθεί (καθαρισμός)
}

05. Γράψτε μια δοκιμή στιγμιότυπου

Σε αυτό το βήμα, πρόκειται να «τοποθετήσουμε» το στοιχείο μας (ή να το καθιστούμε).

 περιγράφουν («το στοιχείο θα πρέπει να κάνει», () = & gt; {
  που θα αυξηθεί (καθαρισμός)
  («καθιστά τα βασικά στηρίγματα», () = & gt; {
    Render (& LT; MyComponent / & GT;)
  })
}

Αυτή η απόδοση μας δίνει πρόσβαση σε όλες τις παρεχόμενες ιδιότητες του συντηρούμενου συστατικού. Ίσως να είναι καλό να το ρίξετε αυτό σε ένα console.log () Έτσι μπορείτε να δείτε πιο ξεκάθαρα τι κάνει.
Εάν το κάνετε, θα δείτε ότι υπάρχουν μερικές χρήσιμες ιδιότητες που μπορούμε να επωφεληθούμε εδώ. Πάω να κάνω έναν ισχυρισμό (να κάνει μια δοκιμαστική δήλωση) και να το δοκιμάσω με την εξαγωγή του δοχείου. Το δοχείο 'περιέχει' τους κόμβους DOM (όλα τα HTML) που σχετίζονται με το στοιχείο.

 («καθιστά τα βασικά στηρίγματα», () = & gt; {
    Const {Container} = Render (& LT; MyComponent / & GT;)
})

Τώρα έχουμε πρόσβαση στο δοχείο, πώς θα πω ότι έχει γίνει σύμφωνα με τον ισχυρισμό μου; Προσθέτοντας μια δοκιμή στιγμιότυπου.

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

06. Δοκιμαστικές ιδιότητες

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

Προσθέστε το ακόλουθο αντικείμενο στην κορυφή του αρχείου σας:

 const lightproperties = {
    BackgroundColour: «Λευκό»,
    TextColour: 'Darkblue'
}

Ορίζουμε τις ιδιότητες σε ένα αντικείμενο και στη συνέχεια χρησιμοποιήστε τον χειριστή εξάπλωσης (τρεις κουκίδες ακολουθούμενες από το όνομα του αντικειμένου: ... Lightproperties) Επειδή μπορούμε να περάσουμε μόνο ένα επιχείρημα στο πότε κάνουμε αυτόν τον τρόπο. Είναι επίσης χρήσιμο να δείτε ποιες ιδιότητες περνάτε μεμονωμένα:

 («καθιστά τα βασικά στηρίγματα», () = & gt; {
        Const {Container} = Render (& LT; MyComponent / & GT;
      )
     περιμένετε (δοχείο) .TomatchSnapshot ()
    })
    ('καθιστά τις εργασίες φωτός', () = & gt; {
        Const {Container} = Render (
            & lt; mycomponent {... lightproperties} / & gt;
        )
        περιμένετε (δοχείο) .TomatchSnapshot ()
    })

07. Οι μεταβολές των δοκιμών στο UI

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

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

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

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

 modetoggle const = () = & gt; {
    const [mode, setmode] = επεξεργασία ['light']
   const toggletheme = () = & gt; {
     αν (Θέμα === 'Light') {
       settheme ('σκοτάδι')
     } αλλιώς {
       attheme ('light')
     }
   }
    ΕΠΙΣΤΡΟΦΗ (
        & lt; togglebutton data-testid = "mode-toggle" lightmode = {mode} onclick = {togglemode} & gt;
          Λειτουργία εναλλαγής
        & lt; / togglebutton & gt;
    )
}

Πρώτον, θα πρέπει να προσθέσουμε ένα αναγνωριστικό δοκιμής στο κουμπί ώστε να μπορέσουμε να το βρούμε στη φάση απόδοσης:

 Επιστροφή (
    & lt; togglebutton
      Δεδομένα-testid = "Λειτουργία-εναλλαγή"
      lightmode = {mode}
      onclick = {togglemode}
     & gt;
      Λειτουργία εναλλαγής
    & lt; / togglebutton & gt;

Παρατηρήσατε ότι προσθέσαμε το νέο χαρακτηριστικό Δεδομένα-δοκιμαστικό στο κουμπί; Εδώ μπορείτε να το δοκιμάσετε. Πρώτον, εισαγάγετε μια νέα λειτουργία, φωτιά από τη βιβλιοθήκη δοκιμών:

 Εισαγωγή {CLEANUP,
          Πυροσβεστήρας,
          καθιστώ
} Από το '@ δοκιμή-βιβλιοθήκη / αντιδράστε'

Μπορούμε να χρησιμοποιήσουμε αυτή τη λειτουργία για να δοκιμάσετε ότι υπάρχουν αλλαγές στο UI και ότι αυτές οι αλλαγές είναι συνεπείς:

 («καθιστά τα βασικά στηρίγματα», () = & gt; {
    const {container} = render (& lt; togglebutton / & gt;
  )
 περιμένετε (δοχείο) .TomatchSnapshot ()
})
('καθιστά το φως UI στο κλικ', () = & GT; {
    const {container, getbytestid} = render (& lt; togglebutton / & gt;)
    firevevent.click (getbytestid ('mode-toggle'))
    περιμένετε (δοχείο) .TomatchSnapshot ()
})

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

Όταν πρόκειται για δοκιμαστικά αναγνωριστικά, προσωπικά δεν μου αρέσει να χρησιμοποιώ Δεδομένα-δοκιμαστικό να βρει κάτι στο DOM. Μετά από όλα, το αντικείμενο των δοκιμών είναι να μιμείται τι κάνει ο χρήστης και να δοκιμάσει τι συμβαίνει όταν το κάνουν. Δεδομένα-δοκιμαστικό Αισθάνεται σαν ένα κομμάτι από ένα εξαπάτηση - αν και οι Dates-testids πιθανόν να έρθουν σε εύχρηστο για τον μηχανικό σας QA (δείτε το Boxout ο ρόλος των μηχανικών διασφάλισης της ποιότητας).

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

08. Mock και spy τη λειτουργία

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

Δεν χρειάζεται να δοκιμάσω ποιο είναι το αποτέλεσμα αυτής της ενότητας. Πρέπει να δοκιμάσω ότι η λειτουργία μου είναι όπως αναμένεται. Για περισσότερες πληροφορίες σχετικά με το γιατί αυτό είναι, παρακαλούμε δείτε τις δοκιμές μονάδας κουτιού και ολοκλήρωση. Σε αυτή την περίπτωση, θα μπορούσαμε να «ψεύδημες» αυτή τη λειτουργία:

 const getpiliveue = jest.fn ()
("καλεί τη λειτουργία στο κλικ", () = & gt; {
    const {container, getbytestid} = render (& lt; togglebutton / & gt;)
    firevevent.click (getbytestid ('mode-toggle'))
    περιμένετε (getpiliveue) .TohavebeencalledTimes (1)
  )
})

Η λειτουργία tohavebeencalledtimes () είναι μία από τις πολλές βοηθητικές λειτουργίες στη βιβλιοθήκη δοκιμών που μας επιτρέπουν

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

09. Έναρξη δοκιμών αντιδράσεων εφαρμογών

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

Για περισσότερες ιδέες σχετικά με τον τρόπο δοκιμής των εξαρτημάτων σας, επισκεφθείτε Βιβλιοθήκη δοκιμών αντιδράσεων ή Αντιδρούν παραδείγματα δοκιμών . Αν ψάχνετε για κάποια μαθήματα για να σας βοηθήσουμε να ξεκινήσετε, το ένα από το kent c dodds (Ποιος έγραψε και διατηρεί την αντιδραστική βιβλιοθήκη δοκιμών) είναι δημοφιλής. Μου άρεσε επίσης Αυτό το επίπεδο στο επίπεδο των μαθήματα Είναι αυτό που με πήρε να γράψω δοκιμές για τον κώδικα μου.

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

Αυτό το περιεχόμενο εμφανίστηκε αρχικά στο καθαρό περιοδικό . Διαβάστε περισσότερα από μας άρθρα σχεδιασμού ιστοσελίδων εδώ .

Διαβάστε περισσότερα:

HTML6: Τι είναι αυτό και πότε φτάνει;
Γράψτε ταχύτερα κώδικα HTML
Σχεδιασμός κινητής εφαρμογής: Οδηγός αρχάριου

πως να - Τα πιο δημοφιλή άρθρα

Τρόπος δοκιμής αντιδράσεων ιστότοπων και εφαρμογών

01. Ξεκινήστε με τη βιβλιοθήκη δοκιμών αντιδράσεων

02. Αποφασίστε τι να δοκιμάσετε

03. Γράψτε την πρώτη δοκιμή σας

04. Χρησιμοποιήστε τη λειτουργία καθαρισμού

05. Γράψτε μια δοκιμή στιγμιότυπου

06. Δοκιμαστικές ιδιότητες

07. Οι μεταβολές των δοκιμών στο UI

08. Mock και spy τη λειτουργία

09. Έναρξη δοκιμών αντιδράσεων εφαρμογών

πως να - Τα πιο δημοφιλή άρθρα

Δημιουργήστε τη δική σας καλλιγραφική βούρτσα στο Illustrator

Πώς να δημιουργήσετε μια δεξιότητα Alexa για τον ιστότοπό σας

Πώς να ζωγραφίσει ένα κάστρο με σκίτσο

Πώς να αναμίξετε το χρώμα σκιάς σε βαφή

Ακονίστε τις δεξιότητες σκίτσων σας

Μετατρέψτε μια φωτογραφία σε ένα σύνολο VR

Δημιουργήστε μια επίδραση splash στην realflow

Ο οδηγός PRO για τη δημιουργία τρισδιάστατων υφών

Κατηγορίες