how test react apps using jest framework
इस वीडियो ट्यूटोरियल में, हम जेस्ट का उपयोग करके एक प्रतिक्रिया ऐप बनाना और परीक्षण करना सीखेंगे, जेस्ट स्पाईऑन कमांड का उपयोग करके जेस्ट और जासूसी कार्यों का उपयोग करके मॉकिंग करें:
सेवा मेरे जेस्ट का पूरा परिचय हमारे पिछले ट्यूटोरियल में दिया गया था। इस ट्यूटोरियल में, हम देखेंगे कि रिएक्ट-आधारित ऐप्स के परीक्षण के लिए जेस्ट का उपयोग कैसे करें।
हम एक सरल का उपयोग करके बूटस्ट्रैप्ड रिएक्ट ऐप बनाना सीखेंगे समुद्र तल के ऊपर आधारित आदेश और जेस्ट प्रतिक्रिया परीक्षण लिखने के लिए एक ही ऐप का उपयोग करें। हम स्नैपशॉट परीक्षण की अवधारणा का भी पता लगाएंगे और यह जानेंगे कि आप जेस्ट फ्रेमवर्क और जेस्ट स्पाईऑन कमांड का उपयोग करके रिएक्ट घटकों को कैसे मॉक एंड स्पाई कर सकते हैं।
आप क्या सीखेंगे:
प्रतिक्रिया - शुरू करना
जेस्ट को अन्य सभी जावास्क्रिप्ट चौखटे के समर्थन के साथ बड़े पैमाने पर रिएक्ट ऐप्स के परीक्षण के लिए बनाया गया था।
जैसा कि हम जेस्ट फ्रेमवर्क और परीक्षणों को जोड़ने के लिए रिएक्ट ऐप का उपयोग कर रहे हैं, यह प्रतिक्रियाशील ऐप्स की बुनियादी समझ रखने के लिए अनिवार्य और वास्तव में एक शर्त है।
एक मूल प्रतिक्रिया एप्लिकेशन के साथ आरंभ करने के लिए, कृपया नीचे दिए गए चरणों का पालन करें:
# 1) रिएक्ट ऐप बनाने के लिए, आप बस एक नोड पैकेज निष्पादक (यानी npx जो npm के साथ भी आता है) का उपयोग कर सकते हैं और नीचे दिए गए कमांड को निष्पादित कर सकते हैं।
npx create-react-app my-app
#दो) एक बार जब उपरोक्त कमांड पूरी हो जाती है, तो अपनी पसंद के किसी भी संपादक में प्रोजेक्ट माय-ऐप खोलें - विज़ुअल स्टूडियो कोड जो स्वतंत्र रूप से उपलब्ध है वह एक अनुशंसित है।
# 3) टर्मिनल / कमांड विंडो (संपादक के अंदर) में, नीचे दिए गए कमांड का उपयोग करके प्रोजेक्ट को चलाएं।
npm start
# 4) एक बार परियोजना संकलित हो जाने के बाद, यह URL http: // localhost: 3000 के साथ एक नया ब्राउज़र टैब खोलेगा
# 5) इसके अलावा, कृपया ध्यान दें कि सभी जेस्ट संबंधी निर्भरताएं उपरोक्त वर्णित npx कमांड का उपयोग करके बनाई गई रिएक्ट परियोजना के एक हिस्से के रूप में स्थापित होती हैं।
# 6) इस परियोजना में जेस्ट-डोम नाम की एक रिएक्ट टेस्टिंग लाइब्रेरी भी शामिल है जिसमें जेस्ट के लिए सहायक कस्टम डोम तत्व मिलान करने वाले बहुत सारे हैं। (जाँच यहाँ प्रतिक्रिया अवधारणाओं पर अधिक जानकारी के लिए)
स्नैपशॉट परीक्षण है
स्नैपशॉट परीक्षण जेस्ट लाइब्रेरी का उपयोग करके प्रतिक्रिया घटक स्नैपशॉट का परीक्षण करने के लिए एक बहुत ही उपयोगी तकनीक है।
आइए सबसे पहले समझने की कोशिश करते हैं कि स्नैपशॉट परीक्षण क्या है अनिवार्य रूप से इसका मतलब है।
स्नैपशॉट कुछ भी नहीं है, लेकिन कुछ भी समय का प्रतिनिधित्व करता है। उदाहरण के लिए, एक स्क्रीनशॉट, एक कैमरा चित्र, आदि सभी स्नैपशॉट हैं जो किसी भी समय के लिए किसी भी चीज़ के विवरण का प्रतिनिधित्व करते हैं।
रिएक्ट के दृष्टिकोण से, स्नैपशॉट कुछ भी नहीं है, बल्कि आपूर्ति की स्थिति और व्यवहार के साथ एक रिएक्ट घटक के समय प्रतिनिधित्व या आउटपुट का एक बिंदु है।
यह नीचे दिए गए चरणों का उपयोग करके एक सरल उदाहरण के साथ समझाया गया है।
# 1) स्नैपशॉट परीक्षण के साथ आरंभ करने के लिए, नीचे दिए गए कमांड का उपयोग करके npm पैकेज 'रिएक्शन-टेस्ट-रेंडरर' जोड़ें।
npm i react-test-renderer
#दो) अब, एक सरल रिएक्ट घटक बनाते हैं जो परीक्षण के तहत हमारा आवेदन होगा। इस घटक में कक्षा चर और पृष्ठ गुणों के रूप में एक सरल स्थिति होगी।
घटक नीचे दिखाया गया है। इस घटक का नाम लिंक के रूप में दें (और इसी प्रतिक्रिया घटक फ़ाइल का नाम 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} ); } }
इस समय, यह कैसे फ़ाइल संरचना प्रतिक्रिया परियोजना के लिए दिखेगा।
# 3) आइए इस घटक के लिए एक स्नैपशॉट परीक्षण जोड़ें।
सेवा मेरे) स्नैपशॉट परीक्षण के साथ आरंभ करने के लिए - प्रतिक्रिया-परीक्षण-रेंडरर नोड पैकेज एक शर्त है। इंस्टॉल प्रतिक्रिया-नोड-रेंडरर नीचे दिए गए आदेश का उपयोग कर।
npm i react-test-renderer
बी) इस नए घटक के लिए परीक्षण जोड़ने के लिए एक नई फ़ाइल जोड़ें। इसका नाम इस प्रकार है Link.test.js
सी) अब एक स्नैपशॉट परीक्षण जोड़ें। यहां, हम पहले रिएक्ट घटक को प्रस्तुत करके एक स्नैपशॉट बनाएंगे।
परीक्षण नीचे दिखाया गया है।
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' के रूप में पारित किया है
घ) जब स्नैपशॉट परीक्षण चलाया जाता है - घटक की एक स्नैपशॉट फ़ाइल बनाई जाती है (एक्सटेंशन के साथ .snap ) और परियोजना निर्देशिका में बचाया है जो अगले परीक्षण के निष्पादन के दौरान पुन: उपयोग किया जाता है।
इस मामले में, परीक्षण के दौरान आपूर्ति की गई पृष्ठ संपत्ति के साथ एक स्नैपशॉट फ़ाइल का उपयोग किया जाएगा। आज्ञा दें 'npm परीक्षण' का उपयोग करके परीक्षण चलाने के बाद स्नैपशॉट फ़ाइल उत्पन्न हो रही है।
है) प्रोजेक्ट src निर्देशिका में '__snapshots__' नामक एक निर्देशिका के तहत एक स्नैपशॉट फ़ाइल बनाई जाती है।
जीरा के लिए सबसे अच्छा परीक्षण मामला प्रबंधन उपकरण
इसके लिए परियोजना संरचना नीचे दी गई है।
उपरोक्त स्क्रीनशॉट में '__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
(जे) उपरोक्त कमांड और अद्यतन दावे के साथ, आप परीक्षा पास करते हुए देखेंगे।
इस प्रकार, संपूर्ण स्नैपशॉट परीक्षण अंतिम दृश्य के विरुद्ध संपूर्ण घटक का परीक्षण करने और पुराने परिणाम को एक स्नैपशॉट के रूप में संग्रहीत करने के लिए एक उपयोगी तकनीक है जो यह सुनिश्चित करता है कि कोई प्रतिगमन समस्या कोड परिवर्तन या सुविधाओं के परिणामस्वरूप या उस मामले के लिए किसी भी रिफैक्टिंग के रूप में पेश न की जाए। मौजूदा घटक के लिए।
वीडियो ट्यूटोरियल: स्नैपशॉट परीक्षण है
मज़ाक का इस्तेमाल करते हुए जेस्ट
इस खंड में, हम देखेंगे कि हम जेस्ट मोक्स का उपयोग कैसे कर सकते हैं। नीचे दिखाए गए अनुसार मोक्स को कई तरीकों से इस्तेमाल किया जा सकता है।
उदाहरण के लिए,
- संपूर्ण अभिक्रिया घटक का मजाक उड़ाना
- एकल या एकाधिक कार्यों का मजाक उड़ाना - यह किसी भी जावास्क्रिप्ट विकास ढांचे के लिए विशिष्ट नहीं है। जेस्ट एक जावास्क्रिप्ट टेस्टिंग लाइब्रेरी है जो किसी विशेष फ्रेमवर्क के लिए विशिष्ट नहीं है, हम जेस्ट का उपयोग एक सादे पुरानी जावास्क्रिप्ट फाइल को मॉक करने के लिए भी कर सकते हैं।
- फंक्शन या जावास्क्रिप्ट कोड के अंदर उपयोग की जाने वाली मॉकिंग एपीआई कॉल - हम जेस्ट का उपयोग थर्ड-पार्टी इंटीग्रेशन से होने वाली प्रतिक्रियाओं का मजाक उड़ाने के लिए कर सकते हैं।
आइए इनमें से प्रत्येक के बारे में विस्तार से चर्चा करें।
मॉकिंग रिएक्ट घटक
रिएक्ट ऐप एक दूसरे पर निर्भर कई घटकों से बना है। सरल समझ के लिए, प्रतिक्रिया घटक को एक वर्ग के रूप में विचार करें - प्रस्तुति और तर्क।
जैसे ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग का उपयोग करके बनाया गया कोई भी जटिल सिस्टम कई वर्गों से बना होता है, इसी तरह, रिएक्ट ऐप घटकों का एक संग्रह है।
अब, जब हम एक घटक का परीक्षण करते हैं, तो हम यह सुनिश्चित करना चाहते हैं कि कोई भी निर्भरता नहीं है जो इसे परीक्षण करने पर प्रभाव डालती है अर्थात यदि 2 घटक हैं, जिस पर परीक्षण के तहत घटक निर्भर है, तो अगर हमारे पास निर्भर घटकों को मॉक करने का साधन है, फिर हम एक और अधिक पूर्ण तरीके से परीक्षण के तहत घटक का परीक्षण कर सकते हैं।
आइए नीचे दिए गए आंकड़े की मदद से इसे समझने की कोशिश करें:
यहाँ हमारे पास Component1 है, जो Component 2 & 3 पर निर्भर है।
इकाई परीक्षण घटक 1 के दौरान, हम घटक नकली और घटक 3 को उनके नकली या नकली काउंटरों के साथ जेस्ट मोक्स का उपयोग करके बदल सकते हैं।
आइए देखें कि हम इन मोक्स को कैसे सेट कर सकते हैं। हम एक डीटीपी के अंदर रखे गए एचटीएमएल पाठ के साथ सरल घटकों का उपयोग करेंगे। सबसे पहले, हम निर्भर घटकों के लिए कोड देखेंगे - घटक 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
अब, देखते हैं कि घटक के पास निर्भर घटक कैसे दिखते हैं। यहां आप देख सकते हैं, कि हम निर्भर घटकों को आयात कर रहे हैं और उन्हें एक साधारण 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() }) })
उपरोक्त परीक्षण फ़ाइल में, आप देख सकते हैं कि हमने फ़ंक्शन का उपयोग करके Components1 और 2 का मजाक उड़ाया है .मॉक
jest.mock('../components/component2', () => () => Hello Mock Component2 )
यह सेटअप बस इस मॉक प्रतिनिधित्व के साथ घटक 2 के सभी चालानों को बदल देगा। इसलिए, जब हम परीक्षण में कंपोनेंट 1 को रेंडर करते हैं, तो यह कंपोनेंट 2 का नकली संस्करण कहलाता है, जिसे हमने यह भी जाँच कर बताया है कि डॉक्युमेंट में Mock div एलिमेंट्स मौजूद हैं या नहीं।
c ++ स्ट्रिंग को चेंज करें
हमने यहां have toBeInTheDocument () माचिस का उपयोग किया है। यह मिलान प्रतिक्रियाशील विशिष्ट है, क्योंकि प्रतिक्रिया अनुप्रयोग अंतिम प्रस्तुत आउटपुट HTML कोड के अलावा कुछ भी नहीं है। इस प्रकार, यह मिलान रिएक्टर द्वारा बनाए गए HTML दस्तावेज़ में मौजूद HTML तत्व के लिए दिखता है।
वीडियो ट्यूटोरियल: जेस्ट - मॉक रिएक्ट घटक
मज़ाक़ का इस्तेमाल करना
अब, आइए देखें कि हम किसी दिए गए जावास्क्रिप्ट फ़ाइल के लिए एक विशिष्ट फ़ंक्शन को मॉक करने के लिए जेस्ट मोक्स का उपयोग कैसे कर सकते हैं।
उपरोक्त आंकड़े में, आप देख सकते हैं कि हम फ़ंक्शन 2 की जगह ले रहे हैं, जो फ़ंक्शन 1 के स्टबबेड / मॉक किए गए संस्करण के साथ फ़ंक्शन 1 की निर्भरता है।
हम पहले एक परीक्षण जावास्क्रिप्ट फ़ाइल बनाएंगे जो परीक्षण के तहत एक आवेदन के रूप में काम करेगी और हम मॉक फंक्शन कॉन्सेप्ट को स्पष्ट करने के लिए कुछ तरीकों का इस्तेमाल करेंगे।
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}
हमारे यहां 2 कार्य हैं यानि अभिवादन () और getFullName ()। पूर्ण नाम प्राप्त करने के लिए नमस्कार () फ़ंक्शन getFullName () का उपयोग करता है। हम देखेंगे कि ग्रीटिंग () विधि का परीक्षण करते समय हम getFullName () फ़ंक्शन को इसके मॉक कार्यान्वयन के साथ कैसे बदल सकते हैं।
जेस्ट मॉक फ़ंक्शन का उपयोग करके इस व्यवहार का मज़ाक बनाने के लिए एक सरल परीक्षण लिखें और देखें कि हम कैसे सत्यापित कर सकते हैं कि मॉक किए गए फ़ंक्शन को बुलाया गया था या नहीं।
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') })
यहां, हमने एक जेस्ट मॉक फ़ंक्शन की घोषणा की है और 'मॉक किए गए नाम' के रूप में रिटर्न वैल्यू सेट किया है जो फ़ंक्शन को कॉल करने पर वापस कर दिया जाएगा।
const mock = jest.fn().mockReturnValue('mocked name')
इसके अलावा, यह प्रमाणित करने के लिए कि मॉक को बुलाया गया था, हम जेस्ट मैचर्स का उपयोग नीचे दिखाए गए अनुसार कर सकते हैं।
- toHaveBeenCalled () - यदि मॉक कहा जाता है, तो मान्य है।
- toHaveBeenCalledWith (arg1, arg2) - यदि दिए गए तर्कों के साथ मॉक को मान्य किया गया।
- toHaveBeenCalledTimes (n) - समय की संख्या की पुष्टि करता है, मॉक कहा जाता होगा।
जेस्ट की एक और विशेषता है जिसे स्पाई कहा जाता है।
तो जासूस क्या हैं और वे मोक्स से कैसे अलग हैं?
ज्यादातर समय, जासूस वास्तविक फ़ंक्शन कॉल की अनुमति देता है, लेकिन चीजों को मान्य करने के लिए इस्तेमाल किया जा सकता है जैसे कि विधि को कॉल करने के लिए क्या तर्क का उपयोग किया गया था और यह पता लगाने के लिए भी कि विधि कॉल हुआ या नहीं।
जेस्ट में जासूसी के माध्यम से किया जा सकता है स्पाईऑन है आज्ञा। जेस्ट स्पाईऑन, ऑब्जेक्ट के रूप में तर्क लेता है और वास्तविक फ़ंक्शन को जासूसी करता है यानी यह वास्तव में परीक्षण के तहत फ़ंक्शन को कॉल करेगा और एक मध्यवर्ती इंटरसेप्टर के रूप में कार्य करेगा।
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()
इस मामले में, वास्तविक फ़ंक्शन कॉल को मॉक कार्यान्वयन द्वारा प्रतिस्थापित किया जाता है जो जासूस के साथ सेट अप होता है।
वीडियो ट्यूटोरियल: जेस्ट- मॉक आपी फंक्शंस
मॉकिंग बाहरी एपीआई कॉल जेस्ट का उपयोग करना
नीचे दिए गए आंकड़े में, आप देख सकते हैं कि function1 बाहरी API समापन बिंदु पर कॉल करता है। उदाहरण के लिए - एक भुगतान भागीदार समापन बिंदु पर कॉल करना जो सफलता या विफलता की प्रतिक्रिया देता है।
अब जब हम इस फ़ंक्शन के लिए यूनिट परीक्षण लिख रहे हैं, तो हम हर बार बाहरी समापन बिंदु को कॉल करने की उम्मीद नहीं कर सकते हैं जब परीक्षण चलाए जाते हैं।
ऐसे कुछ कारण हैं जिनके कारण आप परीक्षण में बाहरी समापन बिंदुओं को कहने से बचेंगे।
- इसमें लागत शामिल हो सकती है।
- इसकी प्रतिक्रिया को नियंत्रित नहीं किया जा सकता है। आप हमेशा सभी अपेक्षित प्रतिक्रिया और त्रुटि कोड के लिए परीक्षण नहीं कर सकते।
- यह हमेशा उपलब्ध नहीं हो सकता है - यदि बाहरी समापन बिंदु उपलब्ध नहीं है, तो परीक्षण के परिणाम परतदार होंगे।
इन सभी कारणों के लिए, यह बहुत उपयोगी होगा यदि हम बाहरी समापन बिंदु के व्यवहार को नियंत्रित कर सकते हैं और अपने कार्य के लिए मजबूत इकाई परीक्षण बना सकते हैं।
आइए देखें कि हम जेस्ट फ्रेमवर्क का उपयोग करके एपीआई कॉल कैसे प्राप्त कर सकते हैं। एक्सियोस एक एनपीएम मॉड्यूल है जिसे नीचे दिए गए कमांड का उपयोग करके प्रोजेक्ट में डाउनलोड / जोड़ा जा सकता है।
npm install --save-dev axios
हम नीचे दिखाए गए अनुसार अपने परीक्षण फ़ंक्शन में एपीआई कॉल करने के लिए using axios 'मॉड्यूल का उपयोग करेंगे।
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');
हमने नीचे कमांड का उपयोग करके मॉक को कॉन्फ़िगर किया है।
axios.get.mockResolvedValue(mockedResponse)
इस तरह, हम बाहरी एपीआई एंडपॉइंट्स से प्रतिक्रियाओं का मजाक उड़ा सकते हैं। यहां हमने ET GET ’के समापन बिंदु का उपयोग किया है, लेकिन उसी दृष्टिकोण का उपयोग अन्य समापन बिंदु जैसे POST, PUT, आदि के लिए भी किया जा सकता है।
वीडियो ट्यूटोरियल: यह है - मॉक आपी एंडपॉइंट
निष्कर्ष
इस ट्यूटोरियल में, हमने सीखा कि एक साधारण रिएक्ट ऐप कैसे बनाया जाता है, और देखा कि किस तरह रिएक्ट घटकों पर स्नैपशॉट परीक्षण करने के साथ-साथ संपूर्ण रिएक्ट घटकों का मज़ाक उड़ाया जा सकता है।
हमने जेस्ट स्पायऑन कमांड का उपयोग करके मॉकिंग के बारे में भी पता लगाया और जेस्ट स्पाईऑन कमांड का उपयोग किया, जो विधि के वास्तविक कार्यान्वयन को बुलाता है और इनवोकेशन की संख्या, तर्क जैसी चीजों पर जोर देने के लिए एक इंटरसेप्टर के रूप में कार्य करता है, जिसे विधि के साथ बुलाया गया था, आदि
PREV ट्यूटोरियल | अगले ट्यूटोरियल
अनुशंसित पाठ
- जेस्ट ट्यूटोरियल - जेस्ट फ्रेमवर्क का उपयोग करके जावास्क्रिप्ट यूनिट टेस्टिंग
- जेस्ट कॉन्फ़िगरेशन और डिबगिंग जेस्ट आधारित टेस्ट
- 25 सर्वश्रेष्ठ जावा परीक्षण फ्रेमवर्क और स्वचालन परीक्षण के लिए उपकरण (भाग 3)
- Node.js टेस्टिंग फ्रेमवर्क कैसे सेटअप करें: Node.js ट्यूटोरियल
- सेलेनियम स्क्रिप्ट में JUnit फ्रेमवर्क और इसके उपयोग का परिचय - सेलेनियम ट्यूटोरियल # 11
- जैस्मीन फ्रेमवर्क ट्यूटोरियल उदाहरण सहित जैस्मीन Jquery
- जावा कलेक्शंस फ्रेमवर्क (JCF) ट्यूटोरियल