Πώς να δοκιμάσετε εφαρμογές Next.js χρησιμοποιώντας το Jest

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

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

Δοκιμή εφαρμογών Next.js

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

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

Τι είναι το Jest;

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

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

Δημιουργήστε μια εφαρμογή Next.js To-Do

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

Για να ξεκινήσετε, ακολουθήστε αυτά τα βήματα:

1. Δημιουργήστε ένα νέο έργο Next.js εκτελώντας την ακόλουθη εντολή στο τερματικό σας:

   npx create-next-app@latest test-tutorial

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

   cd nextjs-test-tutorial

3. Εγκαταστήστε τις απαραίτητες εξαρτήσεις ως Εξαρτήσεις dev εκτελώντας την ακόλουθη εντολή:

   npm εγκατάσταση npm εγκατάσταση --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Με τη ρύθμιση του έργου και τις εξαρτήσεις εγκατεστημένες, είστε πλέον έτοιμοι να δημιουργήσετε την εφαρμογή Next.js και να γράψετε δοκιμές μονάδας χρησιμοποιώντας το Jest.

Δημιουργήστε το στοιχείο εκκρεμοτήτων

Στο /src καταλόγου έργου, ανοίξτε το pages/index.js αρχείο, διαγράψτε τον υπάρχοντα κώδικα boilerplate Next.js και προσθέστε τον ακόλουθο κώδικα.

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

εισαγωγή { useState } από"αντιδρώ";
εισαγωγή στυλ από"../styles/Home.module.css";
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
συνθ [todos, setTodos] = useState([]);
συνθ [newTodo, setNewTodo] = useState("");
συνθ addTodo = () => {
αν (newTodo.trim() !== "") {
συνθ updatedTodos = [...todos, newTodo];
 setTodos (updatedTodos);
 setNewTodo("");
 }
 };
συνθ διαγραφήTodo = (δείκτης) => {
συνθ updatedTodos = [...todos];
 updatedTodos.splice (ευρετήριο, 1);
 setTodos (updatedTodos);
 };

Ο κώδικας χρησιμοποιεί το χρήση Κατάσταση συνδέστε για να αρχικοποιήσετε και να ενημερώσετε τις μεταβλητές κατάστασης: todos και newTodo. ο addTodo Η συνάρτηση προσθέτει μια νέα εκκρεμότητα στη λίστα εκκρεμοτήτων όταν η τιμή εισόδου δεν είναι κενή, ενώ η διαγραφήTodo Η συνάρτηση αφαιρεί μια συγκεκριμένη εργασία από τη λίστα με βάση το ευρετήριό της.

Τώρα, γράψτε τον κώδικα για τα στοιχεία JSX που αποδίδονται στο DOM του προγράμματος περιήγησης.

ΕΠΙΣΤΡΟΦΗ (


 τύπος="κείμενο"
 className={styles.input}
 value={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"προσθήκη-εργασία">
 Προσθήκη Todo
 </button>
"κατάλογος εργασιών">
 {todos.map((todo, ευρετήριο) => (


 {να κάνω}
 </li>
 ))}
 </ul>
 {todos.map((todo, ευρετήριο) => (


 onClick={() => deleteTodo (ευρετήριο)}
 className={styles.button}
 data-testid={`delete-todo-${index}`}
 >
 Διαγράφω
 </button>
 </div>
 ))}
 </div>
 );}

Δοκιμασίες γραφής

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

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

συνθ nextJest = απαιτώ("επόμενο/αστείο");
συνθ createJestConfig = nextJest({
 σκηνοθεσία: "./",
});
συνθ customJestConfig = {
 Κατάλογοι ενοτήτων: ["node_modules", "/"],
 testΠεριβάλλον: "Jest-environment-jsdom",
};
μονάδα μέτρησης.exports = createJestConfig (customJestConfig);

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

Αφού κάνετε την ενημέρωση, τα σενάρια σας θα πρέπει να έχουν την εξής μορφή:

"σενάρια": {
"dev": "επόμενος προγραμματιστής",
"χτίζω": "επόμενη κατασκευή",
"αρχή": "επόμενη αρχή",
"στουπί": "επόμενο λιντ",
"δοκιμή": "αστείο --watchAll"
 },

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

Δοκιμή της εφαρμογής Next.js To-Do με το Jest

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

Πρώτα, κάντε τις ακόλουθες εισαγωγές.

εισαγωγή Σπίτι από"../src/pages/index";
εισαγωγή"@testing-library/jest-dom";
εισαγωγή { fireEvent, render, screen, waitFor, act } από"@testing-library/react";

Γράψτε μια δοκιμή για να δείτε εάν όλα τα στοιχεία αποδίδονται σωστά:

περιγράφω("Εφαρμογή Todo", () => {
 το("αποδίδει την εφαρμογή todo", () => {
 καθιστώ(<Σπίτι />);

 αναμένεται (screen.getByTestId("todo-input")).toBeInTheDocument();
 αναμένεται (screen.getByTestId("προσθήκη-εργασία")).toBeInTheDocument();
 });
});

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

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

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

npm εκτέλεση δοκιμής

Θα πρέπει να δείτε μια παρόμοια απάντηση εάν το τεστ περάσει.

Δοκιμή διαφορετικών ενεργειών και προσομοίωση σφαλμάτων

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

Ξεκινήστε γράφοντας τη δοκιμαστική περίπτωση για τη λειτουργία Add To-Do.

 το("προσθέτει μια δουλειά", ασυγχρονισμός () => {
 καθιστώ(<Σπίτι />);

συνθ todoInput = screen.getByTestId("todo-input");
συνθ addTodoButton = screen.getByTestId("προσθήκη-εργασία");
συνθ todoList = screen.getByTestId("κατάλογος εργασιών");
αναμένω υποκρίνομαι(ασυγχρονισμός () => {
 fireEvent.change (todoInput, { στόχος: { αξία: "New Todo" } });
 addTodoButton.click();
 });
αναμένω περίμενε για(() => {
 expect (todoList).toHaveTextContent("New Todo");
 });
 });

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

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

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

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

Τέλος, γράψτε τη δοκιμαστική περίπτωση για τη λειτουργία Διαγραφή εκκρεμών εργασιών.

 το("διαγράφει μια εργασία", ασυγχρονισμός () => {
 καθιστώ(<Σπίτι />);

συνθ todoInput = screen.getByTestId("todo-input");
συνθ addTodoButton = screen.getByTestId("προσθήκη-εργασία");

 fireEvent.change (todoInput, { στόχος: { αξία: "Todo 1" } });
 fireEvent.click (addTodoButton);

συνθ deleteTodoButton = screen.getByTestId("delete-todo-0");
 fireEvent.click (deleteTodoButton);

συνθ todoList = screen.getByTestId("κατάλογος εργασιών");
αναμένω περίμενε για(() => {
 expect (todoList).toBeEmptyDOMElement();
 });
 });

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

Δοκιμή μονάδας με χρήση Jest

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

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