Μενού

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

  • Κύριος
  • Αλλα
  • Πώς να δοκιμάσετε τις εφαρμογές React χρησιμοποιώντας το Jest Framework

how test react apps using jest framework

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

Σε αυτό το σεμινάριο βίντεο, θα μάθουμε να δημιουργούμε και να δοκιμάζουμε μια εφαρμογή React χρησιμοποιώντας Jest, Mocking χρησιμοποιώντας Jest και Spying λειτουργίες χρησιμοποιώντας την εντολή Jest spyOn:

ΠΡΟΣ ΤΗΝ Πλήρης εισαγωγή του Jest δόθηκε στο προηγούμενο σεμινάριό μας. Σε αυτό το σεμινάριο, θα δούμε πώς να χρησιμοποιήσετε το Jest για τη δοκιμή εφαρμογών που βασίζονται σε αντιδράσεις.

Θα μάθουμε να δημιουργούμε μια εφαρμογή Restr bootstrapped χρησιμοποιώντας ένα απλό πάνω από το επίπεδο της θάλασσας βασισμένη εντολή και χρησιμοποιήστε την ίδια εφαρμογή για τη σύνταξη δοκιμών Jest react. Θα διερευνήσουμε επίσης την έννοια των δοκιμών στιγμιότυπου και θα μάθουμε πώς μπορείτε να πλαστογραφήσετε και να κατασκοπεύσετε τα στοιχεία του React χρησιμοποιώντας το πλαίσιο Jest και την εντολή Jest spyon.

Δοκιμές Εφαρμογών React και χλευάσες και κατάσκοποι

Τι θα μάθετε:

Αντιδράστε - Ξεκινώντας

Το Jest δημιουργήθηκε για τη δοκιμή εφαρμογών React σε μεγάλο βαθμό, μαζί με την υποστήριξη για όλα τα άλλα πλαίσια JavaScript.

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

Για να ξεκινήσετε με μια βασική εφαρμογή React, ακολουθήστε τα παρακάτω βήματα:

# 1) Για να δημιουργήσετε μια εφαρμογή React, μπορείτε απλά να χρησιμοποιήσετε έναν εκτελεστή πακέτων κόμβων (δηλ. Npx που συνοδεύεται επίσης από npm) και να εκτελέσετε την παρακάτω εντολή.

npx create-react-app my-app

#δύο) Μόλις ολοκληρωθεί η παραπάνω εντολή, ανοίξτε το έργο my-app σε οποιονδήποτε επεξεργαστή της επιλογής σας - ο Visual Studio Code που είναι ελεύθερα διαθέσιμος συνιστάται.

# 3) Στο παράθυρο τερματικού / εντολών (εσωτερικό πρόγραμμα επεξεργασίας), εκτελέστε το έργο χρησιμοποιώντας την παρακάτω εντολή.

npm start

# 4) Μόλις καταρτιστεί το έργο, θα ανοίξει μια νέα καρτέλα προγράμματος περιήγησης με τη διεύθυνση URL http: // localhost: 3000

# 5) Επίσης, λάβετε υπόψη ότι όλες οι εξαρτήσεις που σχετίζονται με το Jest εγκαθίστανται ως μέρος του έργου React που δημιουργήθηκε χρησιμοποιώντας την παραπάνω εντολή npx.

# 6) Το έργο περιλαμβάνει επίσης μια βιβλιοθήκη δοκιμών React με το όνομα jest-dom που έχει πολλούς χρήσιμους προσαρμοσμένους προσαρμογείς στοιχείων DOM για το Jest. (Ελεγχος εδώ για περισσότερες λεπτομέρειες σχετικά με τις έννοιες του React)

Υπάρχει δοκιμή στιγμιότυπου

Η δοκιμή στιγμιότυπου είναι μια πολύ χρήσιμη τεχνική για τη δοκιμή στιγμιότυπων στοιχείων React χρησιμοποιώντας τη βιβλιοθήκη Jest.

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

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

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

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

# 1) Για να ξεκινήσετε τη δοκιμή στιγμιότυπου, προσθέστε το πακέτο npm 'react-test-renderer' χρησιμοποιώντας την παρακάτω εντολή.

npm i react-test-renderer

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

Το συστατικό θα φαίνεται όπως φαίνεται παρακάτω. Ας ονομάσουμε αυτό το στοιχείο ως Σύνδεσμος (και έτσι το αντίστοιχο όνομα αρχείου αντιδραστηρίου θα είναι το Link.react.js)

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.page} {this.state.welcomeMessage} ); } }

Αυτή τη στιγμή, έτσι θα αναζητηθεί η δομή αρχείων για το έργο React.

Δομή αρχείων για το έργο React

# 3) Ας προσθέσουμε μια δοκιμή στιγμιότυπου για αυτό το στοιχείο.

προς την) Για να ξεκινήσετε με τη δοκιμή στιγμιότυπου - Το πακέτο κόμβου αντιδραστηρίου-test-renderer αποτελεί προϋπόθεση. Εγκαθιστώ react-node-renderer χρησιμοποιώντας την παρακάτω εντολή.

npm i react-test-renderer

σι) Προσθέστε ένα νέο αρχείο για την προσθήκη δοκιμών για αυτό το νέο στοιχείο. Ας το ονομάσουμε ως Link.test.js

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

Το τεστ θα φαίνεται όπως φαίνεται παρακάτω.

import React from 'react'; import Link from './Link.react' import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create() .toJSON(); console.log(tree) expect(tree).toMatchSnapshot(); });

Εδώ στη δοκιμή, δημιουργούμε μια αναπαράσταση JSON του συστατικού που αποδίδεται. Έχουμε μεταβιβάσει την τιμή για την ιδιότητα 'σελίδα' ως 'www.softwaretestinghelp.com'

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

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

είναι) Ένα αρχείο στιγμιότυπου δημιουργείται κάτω από έναν κατάλογο με το όνομα '__snapshots__' στον κατάλογο src του έργου.

ερωτήσεις και απαντήσεις συνέντευξης informatica για 5 χρόνια εμπειρίας

Δίνεται παρακάτω η δομή του έργου για αυτό.

Κατάλογος

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

φά) Ας δούμε πώς θα είναι το αρχείο στιγμιότυπου.

Άνοιγμα αρχείου - Link.test.js.snap

Αρχείο στιγμιότυπου

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

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

Έτσι αλλάζει το στοιχείο (αλλάξαμε τη σελίδα με το όνομα ιδιοκτησίας σε μια νέα ιδιότητα με όνομα ιστότοπου).

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.site} {this.state.welcomeMessage} ); } }

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

Παρακάτω δίνεται το αποτέλεσμα που λαμβάνουμε κατά την εκτέλεση του τεστ:

Ο κωδικός συστατικού έχει αλλάξει

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

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

yarn test -u

(ι) Με την παραπάνω εντολή και τον ενημερωμένο ισχυρισμό, θα δείτε το τεστ να περνά.

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

Εκπαιδευτικό βίντεο: Υπάρχει δοκιμή στιγμιότυπου

Χλευασμός χρησιμοποιώντας αστεία

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

Για παράδειγμα,

  1. Χλευάσουμε ολόκληρο το React Component
  2. Χλευάσουμε μεμονωμένες ή πολλαπλές λειτουργίες - Αυτό δεν αφορά συγκεκριμένα κανένα πλαίσιο ανάπτυξης Javascript. Καθώς το Jest είναι μια βιβλιοθήκη δοκιμών javascript που δεν είναι συγκεκριμένη για κανένα συγκεκριμένο πλαίσιο, μπορούμε ακόμη και να χρησιμοποιήσουμε το Jest για να πλαστήσουμε ένα απλό παλιό αρχείο Javascript που περιέχει συναρτήσεις.
  3. Χλευάσουμε τις κλήσεις API που χρησιμοποιούνται σε συναρτήσεις ή κώδικα Javascript - Μπορούμε να χρησιμοποιήσουμε το Jest για να κοροϊδεύουμε τις απαντήσεις από την ενσωμάτωση τρίτων.

Ας συζητήσουμε λεπτομερώς καθεμία από αυτές τις μεθόδους κοροϊδίας.

Στοιχεία Reacting Mocking

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

Όπως κάθε σύνθετο σύστημα που έχει κατασκευαστεί με χρήση του Object Oriented Programming αποτελείται από πολλές κατηγορίες, ομοίως, το React App είναι μια συλλογή στοιχείων.

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

Ας προσπαθήσουμε να το κατανοήσουμε με τη βοήθεια του παρακάτω σχήματος:

Στοιχεία Reacting Mocking

Εδώ έχουμε το Component1, το οποίο εξαρτάται από το Component 2 & 3.

Ενώ η δοκιμή μονάδας Component1, μπορούμε να αντικαταστήσουμε το Component2 & Component3 χρησιμοποιώντας το Jest Mocks με τα πλαστά ή πλαστά ομόλογα τους.

Ας δούμε πώς μπορούμε να δημιουργήσουμε αυτές τις χλευές. Θα χρησιμοποιήσουμε απλά στοιχεία με κείμενο Html τοποθετημένο μέσα σε ένα div. Πρώτον, θα δούμε τον κώδικα για εξαρτώμενα στοιχεία - Συστατικό2 και συστατικό3 .

λογισμικό για να κατεβάζετε βίντεο με σωλήνες
import React, { Component} from 'react' class Component2 extends Component { render() { return( Hello Component2 ) } } export default Component2 import React, { Component} from 'react' class Component3 extends Component { render() { return( Hello Component3 ) } } export default Component3

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

import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1

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

import React, {Component} from 'react' import {render, container} from '@testing-library/react' import Component1 from '../components/component1' // arrange - mock setup jest.mock('../components/component2', () => () => Hello Mock Component2 ) jest.mock('../components/component3', () => () => Hello Mock Component3 ) describe('mock component tests', () => { test('mocked components in react', () => { // act const {container} = render() // assert console.log(container.outerHTML) const mockComponent2 = container.querySelector('div#mockComponent2') const mockComponent3 = container.querySelector('div#mockComponent3') expect(mockComponent2).toBeInTheDocument() expect(mockComponent3).toBeInTheDocument() }) })

Στο παραπάνω αρχείο δοκιμής, μπορείτε να δείτε ότι έχουμε κοροϊδέψει τα συστατικά1 & 2 χρησιμοποιώντας τη συνάρτηση είναι

jest.mock('../components/component2', () => () => Hello Mock Component2 )

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

Έχουμε χρησιμοποιήσει το 'toBeInTheDocument () matcher εδώ. Αυτός ο αντιστοιχιστής είναι συγκεκριμένος για το React, καθώς η τελική απόδοση της εφαρμογής React δεν είναι παρά κώδικας HTML. Έτσι, αυτός ο αντιστοιχιστής αναζητά το δεδομένο στοιχείο HTML να υπάρχει στο έγγραφο HTML που δημιουργήθηκε από την React.

Εκπαιδευτικό βίντεο: Jest - Mock React Components

Συναρπαστικές λειτουργίες με χρήση αστείου

Τώρα, ας δούμε πώς μπορούμε να χρησιμοποιήσουμε το Jest mocks, για να χλευάσουμε μια συγκεκριμένη λειτουργία για ένα δεδομένο αρχείο JavaScript.

Λειτουργίες κοροϊδίας χρησιμοποιώντας Jest

Στο παραπάνω σχήμα, μπορείτε να δείτε ότι αντικαθιστούμε τη συνάρτηση 2, η οποία είναι η εξάρτηση της συνάρτησης1 με μια εκτυπωμένη / πλαστή έκδοση της συνάρτησης 2

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

function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}

Έχουμε 2 συναρτήσεις εδώ, δηλαδή χαιρετίστε () και getFullName (). Η συνάρτηση salam () χρησιμοποιεί getFullName () για να αποκτήσει το πλήρες όνομα. Θα δούμε πώς μπορούμε να αντικαταστήσουμε τη συνάρτηση getFullName () με την πλαστή εφαρμογή της κατά τη δοκιμή της μεθόδου χαιρετισμού ().

Ας γράψουμε μια απλή δοκιμή για να χλευάσουμε αυτήν τη συμπεριφορά χρησιμοποιώντας τη συνάρτηση Jest mock και να δούμε πώς μπορούμε να επικυρώσουμε εάν κλήθηκε ή όχι η πλαστή συνάρτηση.

test('illustrate mocks', () => { // arrange const mock = jest.fn().mockReturnValue('mocked name') const greeter = require('../app.js') greeter.getFullName = mock // act const result = greeter.greet('aman', 'kumar') // assert expect(result).toBe('Hello! mocked name') expect(mock).toHaveBeenCalled() expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith('aman','kumar') })

Εδώ, έχουμε δηλώσει μια συνάρτηση Jest mock και ορίσαμε μια τιμή επιστροφής ως 'mocked name' που θα επιστραφεί όταν καλείται η συνάρτηση.

const mock = jest.fn().mockReturnValue('mocked name')

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

  • toHaveBeenCalled () - Επικυρώνεται εάν κληθεί το πλαστό.
  • toHaveBeenCalledWith (arg1, arg2) - Επικυρώνεται εάν το ψευδές κλήθηκε με τα δοθέντα ορίσματα.
  • toHaveBeenCalledTimes (n) - Επικυρώνει τον αριθμό των φορών που θα κληθεί το Mock.

Υπάρχει ένα άλλο χαρακτηριστικό του Jest που ονομάζεται Spy.

Τι είναι λοιπόν οι κατάσκοποι και πώς διαφέρουν από τους χλευασμούς;

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

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

test('illustrate spy', () => { // arrange const greeter = require('../app.js') const getFullNameSpy = jest.spyOn(greeter, 'getFullName') // act const result = greeter.greet('aman', 'kumar') // assert expect(getFullNameSpy).toHaveBeenCalled() expect(result).toBe('Hello! aman kumar') expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') })

Έτσι, στον παραπάνω κώδικα, μπορείτε να παρατηρήσετε ότι:

(Εγώ) Έχουμε δημιουργήσει μια κατασκοπευτική μέθοδο «getFullName» χρησιμοποιώντας την παρακάτω εντολή.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName')

(ii) Σε ισχυρισμούς, επαληθεύουμε ότι ο κατάσκοπος κλήθηκε με αναμενόμενα επιχειρήματα.

expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')

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

const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()

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

Εκπαιδευτικό βίντεο: Λειτουργίες Jest- Mock Api

Χλευάσουμε τις εξωτερικές κλήσεις API χρησιμοποιώντας το Jest

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

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

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

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

Χλευάσουμε εξωτερικές κλήσεις API χρησιμοποιώντας το Jest

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

Ας δούμε πώς μπορούμε να επιτύχουμε πλαστές κλήσεις API χρησιμοποιώντας το πλαίσιο Jest. Το Axios είναι μια μονάδα NPM που θα μπορούσε να ληφθεί / προστεθεί στο έργο χρησιμοποιώντας την παρακάτω εντολή.

npm install --save-dev axios

Θα χρησιμοποιήσουμε τη μονάδα «axios» για να κάνουμε κλήσεις API στη λειτουργία δοκιμής μας όπως φαίνεται παρακάτω.

function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }

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

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

const axios = require('axios') jest.mock('axios'); describe('mock api calls', () => { test('mocking external endpoint in axios', () => { // arrange const mockedResponse = {data: {username:'test-user', address:'India'}} axios.get.mockResolvedValue(mockedResponse) const app = require('../app.js') // act app.getUserData() // asserts expect(axios.get).toHaveBeenCalled() expect(axios.get).toHaveBeenCalledWith('https://reqres.in/api/users/2') }) })

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

Η ενότητα χλευάζεται χρησιμοποιώντας την παρακάτω εντολή.

const axios = require('axios') jest.mock('axios');

Έχουμε διαμορφώσει το mock χρησιμοποιώντας την παρακάτω εντολή.

axios.get.mockResolvedValue(mockedResponse)

Με αυτόν τον τρόπο, μπορούμε να κοροϊδεύουμε τις απαντήσεις από εξωτερικά τελικά σημεία API. Εδώ έχουμε χρησιμοποιήσει ένα τελικό σημείο «GET», αλλά η ίδια προσέγγιση θα μπορούσε να χρησιμοποιηθεί και για άλλα τελικά σημεία όπως POST, PUT κ.λπ.

Εκπαιδευτικό βίντεο: Jest - Mock Api Endpoints

συμπέρασμα

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

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

Εκπαιδευτικό πρόγραμμα PREV | ΕΠΟΜΕΝΟ Φροντιστήριο

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

^