Μενού

Jest Tutorial - Δοκιμή μονάδας JavaScript χρησιμοποιώντας το Jest Framework

  • Κύριος
  • Αλλα
  • Jest Tutorial - Δοκιμή μονάδας JavaScript χρησιμοποιώντας το Jest Framework

jest tutorial javascript unit testing using jest framework

Δοκιμάστε Το Όργανο Μας Για Την Εξάλειψη Των Προβλημάτων

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

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

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

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

Υπάρχει ένα μάθημα

Λίστα εκπαιδευτικών σε αυτήν τη σειρά JEST

Εκμάθηση # 1: Jest Tutorial - Δοκιμή μονάδας JavaScript με το Jest Framework
Εκμάθηση # 2: Πώς να δοκιμάσετε τις εφαρμογές React χρησιμοποιώντας το Jest Framework
Εκμάθηση # 3: Διαμόρφωση Jest και εντοπισμός σφαλμάτων Δοκιμές με βάση Jest

Τι θα μάθετε:

Ξεκινώντας με τη δοκιμή Jest

Μερικά από τα πλεονεκτήματα / χαρακτηριστικά του Jest δίνονται παρακάτω:

  1. Απαιτείται μηδενική διαμόρφωση.
  2. Γρήγορα: Οι δοκιμές Jest εκτελούνται παράλληλα - αυτό με τη σειρά του μειώνει σημαντικά τον χρόνο εκτέλεσης της δοκιμής.
  3. Ενσωματωμένη κάλυψη κώδικα: Το Jest υποστηρίζει την κάλυψη κώδικα από το κουτί - αυτή είναι μια πολύ χρήσιμη μέτρηση για όλους τους αγωγούς παράδοσης που βασίζονται σε CI και τη συνολική αποτελεσματικότητα της δοκιμής ενός έργου.
  4. Μεμονωμένες και δοκιμαστικές δοκιμές: Κάθε δοκιμή Jest εκτελείται στο δικό της sandbox, το οποίο διασφαλίζει ότι δύο δοκιμές δεν μπορούν να επηρεάσουν ή να επηρεάσουν το ένα το άλλο.
  5. Ισχυρή υποστήριξη Mocking: Οι δοκιμές Jest υποστηρίζουν όλους τους τύπους γελοιοποίησης - είτε πρόκειται για λειτουργικό χλεύη, για χλευασμό με χρονοδιακόπτη ή για χλευασμό μεμονωμένων κλήσεων API.
  6. Υποστήριξη δοκιμών στιγμιότυπου: Η δοκιμή στιγμιότυπου είναι σχετική από την οπτική γωνία React. Το Jest υποστηρίζει τη λήψη ενός στιγμιότυπου του συστατικού αντίδρασης που δοκιμάζεται - αυτό μπορεί να επικυρωθεί με την πραγματική έξοδο του στοιχείου. Αυτό βοηθά πολύ στην επικύρωση της συμπεριφοράς του στοιχείου.

Jest Framework για δοκιμή μονάδας JavaScript

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

Εγκατάσταση IS

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

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

ποιο βοηθητικό πρόγραμμα μπορεί να χρησιμοποιηθεί για την παρακολούθηση αναλυτικών πληροφοριών από τον ιστότοπο μιας εταιρείας;
yarn add --dev jest npm install --save-dev jest

Για την εγκατάσταση της μονάδας Jest παγκοσμίως, μπορείτε απλά να χρησιμοποιήσετε τη σημαία «-g» μαζί με την εντολή npm. Αυτό θα σας επιτρέψει να χρησιμοποιήσετε τις εντολές Jest απευθείας χωρίς να διαμορφώσετε το αρχείο πακέτου για δοκιμές npm.

npm install -g jest

Χρησιμοποιώντας το Jest σε ένα έργο που βασίζεται σε κόμβο

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

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

# 1) Δημιουργήστε έναν φάκελο / κατάλογο με ένα όνομα ως το όνομα του έργου σας, για παράδειγμα , myFirstNodeProject

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

npm init

# 3) Μόλις εκτελεστεί η παραπάνω εντολή, θα ζητήσει διαφορετικές ερωτήσεις / παραμέτρους.

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

# 4) Τώρα εκτελέστε την εντολή για να εγκαταστήσετε το πακέτο Jest στο νέο έργο χρησιμοποιώντας την παρακάτω εντολή.

npm install --save-dev jest

Αυτό θα εγκαταστήσει τη μονάδα Jest (καθώς και τις εξαρτήσεις της).

# 5) Τώρα, έχουμε ένα έργο κόμβου έτοιμο με δέσμες Jest. Ας διαμορφώσουμε το σενάριο δοκιμής npm για την εκτέλεση των δοκιμών Jest, δηλαδή όταν εκτελείται η εντολή «δοκιμή npm», το σενάριο θα πρέπει να εκτελεί όλες τις δοκιμές βάσει πλαισίου Jest.

Για να το κάνετε αυτό, ενημερώστε το αρχείο package.json και προσθέστε μια ενότητα σεναρίου όπως φαίνεται παρακάτω.

'scripts': { 'test': 'jest' }

Το τελικό αρχείο package.json θα φαίνεται όπως φαίνεται παρακάτω.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Γράφοντας δοκιμές για μια συνάρτηση Javascript

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

Αρχικά, ας δούμε πώς μοιάζει ο κώδικας για την υπό δοκιμή εφαρμογή μας (ή τη λειτουργία).

# 1) Στο έργο κόμβου που δημιουργήθηκε στην παραπάνω ενότητα, δημιουργήστε ένα αρχείο js με το όνομα calculator.js με περιεχόμενο όπως φαίνεται παρακάτω

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#δύο) Τώρα, δημιουργήστε ένα δοκιμαστικό αρχείο στον ίδιο φάκελο για αυτές τις δοκιμές, με το όνομα calculator.test.js - αυτή είναι η σύμβαση που αναμένεται από το πλαίσιο Jest να αναζητήσει όλα τα αρχεία που περιέχουν δοκιμές με βάση το Jest. Θα εισαγάγουμε επίσης τη συνάρτηση υπό δοκιμή, προκειμένου να εκτελέσουμε τον κώδικα στη δοκιμή.

Έτσι φαίνεται το αρχείο μόνο με δήλωση εισαγωγής / απαίτησης.

const mathOperations = require('./calculator');

# 3) Τώρα, ας γράψουμε δοκιμές για διαφορετικές μεθόδους στο κύριο αρχείο, δηλαδή άθροισμα, διαφορά και προϊόν.

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

Ας γράψουμε μια δοκιμή για την προσθήκη 2 αριθμών και επικύρωση των αναμενόμενων αποτελεσμάτων. Θα παρέχουμε τους αριθμούς ως 1 & 2 και αναμένουμε την έξοδο ως 3.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Ανατρέξτε στα παρακάτω σημεία με την παραπάνω δοκιμή:

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

σι) Στη συνέχεια, έχουμε ένα μεμονωμένο τετράγωνο δοκιμής - αυτό αντιπροσωπεύει ένα μόνο τεστ. Η συμβολοσειρά σε εισαγωγικά αντιπροσωπεύει το όνομα του τεστ.

ντο) Ανατρέξτε στον κωδικό στο μπλοκ προσδοκίας - το «προσδοκώ» δεν είναι παρά ένας ισχυρισμός. Η δήλωση καλεί τη μέθοδο αθροίσματος στη συνάρτηση υπό δοκιμή με εισόδους 1 & 2 και αναμένει ότι η έξοδος θα είναι 3.

Μπορούμε επίσης να το ξαναγράψουμε με απλούστερο τρόπο για να το κατανοήσουμε καλύτερα.

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

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

ρε) Για να εκτελέσετε αυτήν τη δοκιμή, απλώς εκτελέστε την εντολή ' δοκιμή πάνω από τη στάθμη της θάλασσας 'Στο τερματικό ή στη γραμμή εντολών στη θέση του έργου.

Θα δείτε την έξοδο όπως φαίνεται παρακάτω.

Εκτελέστε την εντολή

# 4) Ας δοκιμάσουμε μερικές ακόμη δοκιμές.

προς την) Κατ 'αρχάς, γράψτε μια δοκιμασία που αποτυγχάνει και δείτε τι αποτέλεσμα έχουμε. Ας αλλάξουμε απλώς το αποτέλεσμα σε κάποια λανθασμένη τιμή στην ίδια δοκιμή που γράψαμε στην τελευταία ενότητα. Δείτε πώς φαίνεται το τεστ.

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Εδώ αναμένουμε ένα ποσό 1 και 2 να επιστρέψει 10, το οποίο είναι λανθασμένο.

Ας προσπαθήσουμε να το εκτελέσουμε και να δούμε τι παίρνουμε.

λεπτομερή έξοδος όταν αποτύχει μια δοκιμή

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

σι) Ας γράψουμε περισσότερες δοκιμές για τις άλλες λειτουργίες, δηλαδή διαφορά και προϊόν.

Το αρχείο δοκιμής με όλες τις δοκιμές θα φαίνεται όπως φαίνεται παρακάτω.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Όταν εκτελούνται οι παραπάνω δοκιμές, παράγεται η έξοδος που δίνεται παρακάτω.

Δοκιμές εξόδου για συναρτήσεις - διαφορά και προϊόν

Εκπαιδευτικό βίντεο: Τι είναι αστείο

Υπάρχει Matchers

Οι ισχυρισμοί Jest χρησιμοποιούν αντιστοιχιστές για να διεκδικήσουν μια συνθήκη. Ο Jest χρησιμοποιεί ταιριαστές από το αναμενόμενο Api. Μπορεί να γίνει αναφορά στο έγγραφο αναμενόμενου API εδώ.

Ας δούμε μερικές από τις πιο συχνά χρησιμοποιούμενες αντιστοιχίες μαζί με τις δοκιμές Jest.

# 1) Ισότητα

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

Ας δούμε μερικά παραδείγματα παρακάτω:

Εδώ έχουμε γράψει 2 ταιριαστές χρησιμοποιώντας το toBe και το not.toBe που είναι ανάλογοι με ίσους και όχι ίσους.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Αλήθεια

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

Για παράδειγμα, αριθμός 0, μηδενική, κενή συμβολοσειρά, το NaN είναι όλα παραδείγματα ψεύτικου w.r.t Javascript.

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Αριθμοί αντιστοίχισης

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

Για παράδειγμα, μεγαλύτεροThan, λιγότεροThan, μεγαλύτεροThanOrEqual, κ.λπ.

Δείτε τα παρακάτω παραδείγματα για περισσότερες λεπτομέρειες

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) Ταιριαστές String

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

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Εκπαιδευτικό βίντεο: Υπάρχει Matchers

Jest Hooks - Ρύθμιση και Teardown

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

Συνολικά υπάρχουν 4 άγκιστρα που είναι διαθέσιμα για χρήση.

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

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

Θα ορίσουμε τις εισόδους στο BeforeEach hook για απεικόνιση. Το αρχείο δοκιμής θα μοιάζει με άγκιστρα δοκιμής όπως φαίνεται παρακάτω.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

ΣΥΜΒΟΥΛΕΣ

# 1) Οι αναφορές της γραμμής εντολών είναι καλές αλλά όχι πολύ ευανάγνωστες. Υπάρχουν διαθέσιμες βιβλιοθήκες / λειτουργικές μονάδες για τη δημιουργία αναφορών δοκιμών βάσει HTML για δοκιμές Jest. Μπορεί να επιτευχθεί όπως φαίνεται παρακάτω.

  • Προσθέστε πακέτο κόμβων για jest-html-reporter χρησιμοποιώντας την παρακάτω εντολή.
npm install --save-dev jest-html-reporter
  • Τώρα προσθέστε τη διαμόρφωση Jest για τον ρεπόρτερ στο αρχείο package.json του έργου κόμβου.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Μόλις διαμορφωθεί τώρα, εκτελέστε τις δοκιμές χρησιμοποιώντας το ' δοκιμή πάνω από τη στάθμη της θάλασσας ' εντολή.
  • Εάν η εγκατάσταση είναι επιτυχής, θα πρέπει να μπορείτε να δείτε μια αναφορά βάσει HTML να δημιουργείται στον κατάλογο έργου.

Έκθεση δοκιμής

# 2) Δημιουργία αναφοράς κάλυψης κώδικα: Η κάλυψη κώδικα είναι μία από τις πιο σημαντικές μετρήσεις από την άποψη της δοκιμής μονάδας. Μετρά ουσιαστικά το ποσοστό των δηλώσεων / κλάδων που καλύπτονται για την υπό δοκιμή εφαρμογή.

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

Προσθέστε τη διαμόρφωση όπως φαίνεται παρακάτω:

'jest': { 'collectCoverage':true }

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

λεπτομέρειες κάλυψης κώδικα

Εκπαιδευτικό βίντεο: Δημιουργία αναφορών Jest & HTML Report

συμπέρασμα

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

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

ΕΠΟΜΕΝΟ Φροντιστήριο

Συνιστώμενη ανάγνωση

^