Cypress.io E2E टेस्ट रनर में Vue घटकों का परीक्षण करने के लिए थोड़ा सहायक

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

Cypress.io E2E टेस्ट रनर में Vue घटकों का परीक्षण करने के लिए थोड़ा सहायक

सरू-व्यू-इकाई-परीक्षण

ओपन सोर्स में Vue घटकों को इकाई परीक्षण करने के लिए थोड़ा सहायक Cypress.io E2E परीक्षण धावक v4.5.0 +

टीएलडीआर

  • यह क्या है? यह पैकेज आपको उपयोग करने की अनुमति देता है सरो टेस्ट रनर टू यूनिट शून्य प्रयास के साथ अपने Vue घटकों का परीक्षण करें।

उदाहरण घटक परीक्षण

  • यह किस प्रकार भिन्न है व्यू-टेस्ट-बर्तन ? Vue Test Utils Node का उपयोग करता है, इसके लिए स्टबिंग ब्राउज़र API की आवश्यकता होती है, और उपयोगकर्ताओं को Vue के आंतरिक ईवेंट लूप की प्रतीक्षा करने की आवश्यकता होती है। Cypress Vue Unit Test प्रत्येक घटक को वास्तविक ब्राउज़र में Cypress E2E टेस्ट रनर की पूरी शक्ति के साथ चलाता है: लाइव जीयूआई, पूर्ण एपीआई, स्क्रीन रिकॉर्डिंग, सीआई समर्थन, क्रॉस-प्लेटफॉर्म .



  • यदि आप |_+_| का उपयोग करना पसंद करते हैं, तो आप |_+_| . का उपयोग कर सकते हैं उसी के लिए |_+_|, |_+_| आदेश, नीचे दी गई सूची में से एक उदाहरण देखें

वेबदैनिकी डाक

इंस्टॉल

टर्मिनल टाइपिंग vue सरू-प्रयोगात्मक जोड़ें

  • सरू v4.5.0 या बाद के संस्करण की आवश्यकता है
  • आवश्यक है नोड संस्करण 8 या इसके बाद के संस्करण
  • केवल वेबपैक-आधारित परियोजनाओं का समर्थन
  • Vue CLI के माध्यम से इंस्टॉलेशन की सिफारिश की गई, पढ़ें अपना पहला Vue घटक परीक्षण लिखें

सीएलआई स्थापना दृश्य

देखें सीएलआई v3 +

अनुशंसित : Vue CLI के माध्यम से मौजूदा परियोजनाओं के लिए एक कदम स्थापित करें प्रयोगात्मक प्लगइन , पढ़ना अपना पहला Vue घटक परीक्षण लिखें

@testing-library/vue

यदि आप इस पैकेज को मैन्युअल रूप से स्थापित करना चाहते हैं, तो अनुसरण करें मैनुअल इंस्टाल

डिलीट हुए ट्वीट को कैसे रिकवर करें

उपयोग और उदाहरण

@testing-library/cypress

विकल्प

लोड करने के लिए आप अतिरिक्त शैलियाँ, css फ़ाइलें और बाहरी स्टाइलशीट पास कर सकते हैं, देखें डॉक्स/शैलियों.md पूरी सूची के लिए।

findBy

विवरण के लिए नीचे उदाहरण देखें।

वैश्विक दृश्य विकल्प

Vue घटक को माउंट करते समय आप एक्सटेंशन (वैश्विक घटक, मिश्रण, उपयोग करने के लिए मॉड्यूल) पास कर सकते हैं। उपयोग |_+_| |_+_| के अंदर वस्तु।

  • |_+_| - विश्व स्तर पर पंजीकृत करने के लिए 'आईडी' और घटकों की वस्तु, देखें अवयव उदाहरण
  • |_+_| (उपनाम |_+_|) - प्लगइन्स की सूची, देखें प्लग-इन
  • |_+_| (उपनाम |_+_|) - वैश्विक मिश्रणों की सूची, देखें मिक्सिन्स उदाहरण
  • |_+_| - वैश्विक फ़िल्टर का हैश, देखें फिल्टर उदाहरण

परिचय उदाहरण

पहले Vue v2 उदाहरण पर एक नज़र डालें: घोषणात्मक प्रतिपादन . कोड बहुत आसान है

queryBy vue add cypress-experimental

यह ब्राउज़र में चलते समय संदेश दिखाता है

// components/HelloWorld.spec.js import { mount } from 'cypress-vue-unit-test' import { HelloWorld } from './HelloWorld.vue' describe('HelloWorld component', () => { it('works', () => { mount(HelloWorld) // now use standard Cypress commands cy.contains('Hello World!').should('be.visible') }) })

आइए इसका परीक्षण करें Cypress.io (वर्तमान संस्करण के लिए देखें सरू/एकीकरण/spec.js )

import Todo from './Todo.vue' const todo = { id: '123', title: 'Write more tests', } mount(Todo, { propsData: { todo }, stylesheets: [ 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css', ], })

सरू टेस्ट रनर को फायर करें और वास्तविक ब्राउज़र (इलेक्ट्रॉन, क्रोम) Vue लोड करें और अपना टेस्ट कोड माउंट करें और संदर्भ के माध्यम से इंस्टेंस के साथ बातचीत करने में सक्षम हों |_+_| और जीयूआई के माध्यम से। की पूरी शक्ति सरू एपीआई उपलब्ध है।

पैसा कैसे बेकार हो गया

हैलो वर्ल्ड टेस्टेड

सूची उदाहरण

Vue डॉक्स में आगे एक सूची उदाहरण है।

{ extensions: { ... }} options

आइए इसका परीक्षण करें। सरल।

components

परीक्षण की गई सूची

उपयोगकर्ता इनपुट को संभालना

Vue डॉक्स में अगला भाग इसके साथ शुरू होता है रिवर्स संदेश उदाहरण .

use plugins

हम इसी तरह टेस्ट लिख सकते हैं

mixin

देखिए टेस्ट का वीडियो। जब आप |_+_| . पर होवर करते हैं चरण परीक्षण धावक दिखा रहा है इससे पहले तथा उपरांत डोम स्नैपशॉट। इतना ही नहीं, एप्लिकेशन पूरी तरह से काम कर रहा है, आप एप्लिकेशन के साथ बातचीत कर सकते हैं क्योंकि यह वास्तव में चल रहा है!

रिवर्स इनपुट

घटक उदाहरण

आइए एक जटिल उदाहरण का परीक्षण करें। आइए एक परीक्षण करें एकल फ़ाइल Vue घटक . यह रहा नमस्ते.व्यू फ़ाइल

mixins

ध्यान दें सरू में Vue घटक फ़ाइलों को लोड करने का तरीका जानने के लिए, देखें बंडलिंग अनुभाग।

क्या आप घटक के साथ बातचीत करना चाहते हैं? आगे बढ़ो! क्या आप कई घटक रखना चाहते हैं? कोई दिक्कत नहीं है!

ट्विटर पर डिलीट सर्च हिस्ट्री कैसे देखें
filters

जासूसी का उदाहरण

कई Vue दस्तावेज़ उदाहरणों में बटन काउंटर घटक का उपयोग किया जाता है

{{ message }}

आइए इसका परीक्षण करें - जब बटन क्लिक किया जाता है तो हम कैसे सुनिश्चित करते हैं कि घटना उत्सर्जित होती है? सरल - आइए हम घटना की जासूसी करें, जासूसी और ठूंठ सरू में बनाया गया है

var app = new Vue({ el: '#app', data() { return { message: 'Hello Vue!' } }, })

घटक वास्तव में क्लिक के जवाब में काउंटर को अपडेट कर रहा है और एक घटना का उत्सर्जन कर रहा है।

जासूसी परीक्षण

एक्सएचआर जासूसी और ठूंठ

माउंट फ़ंक्शन स्वचालित रूप से XMLHttpRequest को लपेटता है जिससे आपको XHR अनुरोधों को रोकने की क्षमता मिलती है जो आपके घटक कर सकते हैं। पूर्ण दस्तावेज़ीकरण के लिए देखें नेटवर्क अनुरोध . इस रेपो में देखें घटक / AjaxList.vue और संबंधित परीक्षण सरू/एकीकरण/ajax-list-spec.js .

Hello Vue!

पर जासूसी |_+_|

|_+_| . पर कॉल करता है स्वचालित रूप से रिकॉर्ड किए जाते हैं, लेकिन दिखाई नहीं देते हैं। इसके बजाय आप उन पर जासूसी कर सकते हैं, देखें अलर्टमैसेज.व्यू और उसका परीक्षण सरू/एकीकरण/अलर्ट-स्पेक.जेएस

तुलना

विशेषता Vue टेस्ट यूटिल्स या @ टेस्टिंग-लाइब्रेरी / Vue सरू + |_+_|
असली ब्राउज़र में टेस्ट चलता है मैं मैं
पूर्ण माउंट का उपयोग करता है मैं मैं
गति नापो जितनी तेजी से ऐप ब्राउज़र में काम करता है
परीक्षण अतिरिक्त प्लगइन्स का उपयोग कर सकता है शायद कोई भी प्रयोग करें सरू प्लगइन
परीक्षण घटक के साथ बातचीत कर सकता है सिंथेटिक सीमित एपीआई कोई भी प्रयोग करें सरू कमांड
परीक्षण डिबग किया जा सकता है टर्मिनल और नोड डीबगर के माध्यम से ब्राउज़र का उपयोग करें DevTools
अंतर्निहित समय यात्रा डीबगर मैं साइप्रस समय यात्रा डीबगर
फ़ाइल या परीक्षण परिवर्तन पर परीक्षण फिर से चलाएँ मैं मैं
सीआई . पर टेस्ट आउटपुट टर्मिनल टर्मिनल, स्क्रीनशॉट, वीडियो
परीक्षण समानांतर में चलाए जा सकते हैं मैं के माध्यम से साथ में चलाना
इंटरफ़ेस के विरुद्ध परीक्षण अगर |_+_| . का उपयोग कर रहे हैं और उपयोग कर सकते हैं |_+_|
जासूसी और मजाक मजाक है अन्यथा पुस्तकालय
कोड कवरेज़ मैं मैं

उदाहरण

import { mountCallback } from 'cypress-vue-unit-test' describe('Declarative rendering', () => { // Vue code from https://vuejs.org/v2/guide/#Declarative-Rendering const template = ` {{ message }} ` const data = { message: 'Hello Vue!', } // that's all you need to do beforeEach(mountCallback({ template, data })) it('shows hello', () => { cy.contains('Hello Vue!') }) it('changes message if data changes', () => { // mounted Vue instance is available under Cypress.vue Cypress.vue.message = 'Vue rocks!' cy.contains('Vue rocks!') }) })

बुनियादी उदाहरण

कल्पना विवरण
अवयव उपयोग करने के लिए वैश्विक घटकों को पंजीकृत करता है
फिल्टर वैश्विक फ़िल्टर पंजीकृत करना
नमस्ते Vue2 कुकबुक से परीक्षण उदाहरण
मिक्सिन्स Vue मिक्सिन का पंजीकरण
प्लग-इन अतिरिक्त प्लगइन्स लोड हो रहा है
रंगमंच की सामग्री माउंट के दौरान घटक के लिए सहारा पास करें
स्लॉट्स घटक को स्लॉट और स्कोप्ड स्लॉट पास करना
छोटे उदाहरण कुछ छोटे उदाहरण परीक्षण प्रपत्र, बटन

उन्नत उदाहरण

कल्पना विवरण
एक्सेस-घटक माउंटेड कंपोनेंट को सीधे टेस्ट से एक्सेस करें
i18n परीक्षण घटक जो उपयोग करता है I18n . देखें लगाना
उपहास करना तीसरे पक्ष के कॉमनजेएस मॉड्यूल जैसे |_+_| . का मज़ाक उड़ाना
मज़ाक करना मज़ाक करना |_+_| प्रतिक्रियाओं को रोकने और UI का परीक्षण करने के लिए
फ़ेच-पॉलीफ़िल प्रयोगात्मक प्रयोग |_+_| नियमित सरू नेटवर्क विधियों का उपयोग करके उन अजाक्स अनुरोधों की जासूसी / स्टब करने के लिए पॉलीफिल
उपहास-घटक परीक्षण के दौरान स्थानीय रूप से पंजीकृत चाइल्ड कंपोनेंट्स का मज़ाक उड़ाना
मज़ाक-आयात स्टब ES6 परीक्षणों से आयात करता है
रेंडर-फ़ंक्शंस ए के साथ बढ़ते घटक समारोह प्रस्तुत करना

पूर्ण उदाहरण

हमारे पास कई सबफ़ोल्डर हैं उदाहरण फ़ोल्डर।

फ़ोल्डर का नाम विवरण
क्लि Vue CLI का उपयोग करके एक उदाहरण ऐप स्कैफोल्ड किया गया और |_+_| . का उपयोग करके जोड़ा गया घटक परीक्षण आदेश।

बाहरी उदाहरण

रेपो विवरण
vue-घटक-परीक्षण-उदाहरण अतिरिक्त घटक परीक्षणों के साथ स्कैफोल्डेड Vue CLI v3 प्रोजेक्ट, पढ़ें अपना पहला Vue घटक परीक्षण लिखें .

ज्ञात समस्याएं

बंडलिंग

हम इस Vue फ़ाइल को परीक्षण कोड में कैसे लोड करते हैं? वेबपैक प्रीप्रोसेसर का उपयोग करना। ध्यान दें कि यह मॉड्यूल के साथ जहाज करता है @ सरू/वेबपैक-प्रीप्रोसेसर 2.x जिसके लिए वेबपैक 4.x की आवश्यकता है। यदि आपके पास वेबपैक 3.x है तो कृपया |_+_| जोड़ें।

छोटा रास्ता

वेबपैक उपयोगकर्ताओं के लिए

आपके प्रोजेक्ट में शायद पहले से ही |_+_| पारदर्शी करने के लिए सेटअप |_+_| फ़ाइलें। इन फ़ाइलों को सरू परीक्षणों में लोड करने के लिए, इस मॉड्यूल में शामिल वेबपैक प्रोसेसर को पकड़ें, और इसे |_+_| फ़ाइल।

Cypress.vue.$data

सरू आयात करने में सक्षम होना चाहिए |_+_| परीक्षण में फ़ाइलें

पीएसटी से थंडरबर्ड कनवर्टर मुफ्त डाउनलोड

पुस्तिका

का उपयोग करते हुए @ सरू/वेबपैक-प्रीप्रोसेसर तथा व्यू-लोडर . आप उपयोग कर सकते हैं सरू/प्लगइन्स/index.js लोड करने के लिए |_+_| |_+_| का उपयोग कर फ़ाइलें।

  1. {{ todo.text }}

देव निर्भरता स्थापित करें

var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' }, ], }, })

और एक परीक्षण लिखें

import { mountCallback } from 'cypress-vue-unit-test' describe('Declarative rendering', () => { // List example from https://vuejs.org/v2/guide/#Declarative-Rendering const template = `
  1. {{ todo.text }}
` function data() { return { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' }, ], } } beforeEach(mountCallback({ template, data })) it('shows 3 items', () => { cy.get('li').should('have.length', 3) }) it('can add an item', () => { Cypress.vue.todos.push({ text: 'Test using Cypress' }) cy.get('li').should('have.length', 4) }) })

कोड कवरेज़

यह प्लगइन |_+_| . का उपयोग करता है स्वचालित रूप से साधन करने के लिए |_+_| और |_+_| फ़ाइलें और निर्भरता का उपयोग करके कोड कवरेज रिपोर्ट उत्पन्न करता है सरू-आईओ/कोड-कवरेज (शामिल)। परीक्षण चलाने के अंत में आउटपुट रिपोर्ट फ़ोल्डर कवरेज में सहेजी जाती हैं।

यदि आप कोड कवरेज इंस्ट्रुमेंटेशन और रिपोर्टिंग को अक्षम करना चाहते हैं, तो |_+_| . का उपयोग करें या |_+_| या अपने में सेट करें |_+_| फ़ाइल

{{ message }}

Reverse Message

नोट ️: अगर घटक |_+_| फ़ाइल में एक नहीं है |_+_| अनुभाग, इसमें कोई कोड कवरेज जानकारी नहीं होगी।

विकास

सभी स्थानीय परीक्षण देखने के लिए, निर्भरताएँ स्थापित करें, कोड बनाएँ और सरू को GUI मोड में खोलें

var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!', }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') }, }, })

निर्माण |_+_| . का उपयोग करके किया जाता है जो से सभी फाइलों को ट्रांसपाइल करता है एसआरसी को |_+_| फ़ोल्डर। फिर आप सरू खोलकर घटक परीक्षण चला सकते हैं

import { mountCallback } from 'cypress-vue-unit-test' describe('Handling User Input', () => { // Example from https://vuejs.org/v2/guide/#Handling-User-Input const template = `

{{ message }}

Reverse Message ` function data() { return { message: 'Hello Vue.js!' } } const methods = { reverseMessage: function () { this.message = this.message.split('').reverse().join('') }, } beforeEach(mountCallback({ template, data, methods })) it('reverses text', () => { cy.contains('Hello Vue') cy.get('button').click() cy.contains('!sj.euV olleH') }) })

और किसी भी घटक कल्पना पर क्लिक करना

घटक चश्मा

बड़े परीक्षण जो पूर्ण अनुप्रयोग का उपयोग करते हैं और सीआई पर चलते हैं (देखें सर्कल.वाईएमएल ) फ़ोल्डर में स्थित हैं उदाहरण .

डिबगिंग

पर्यावरण चर के साथ सरू चलाएँ

CLICK

यदि कुछ गहरे नेस्टेड ऑब्जेक्ट संक्षिप्त हैं और पूरी तरह से प्रिंट नहीं होते हैं, तो अधिकतम लॉगिंग गहराई सेट करें

{{ greeting }} World!

export default { data() { return { greeting: 'Hello', } }, } p { font-size: 2em; text-align: center; }

सामान्य प्रश्न

  • यदि आपके घटक की स्थिर संपत्ति लोड नहीं हो रही है, तो आपको संभवतः वेबपैक देव सर्वर को शुरू करने और प्रॉक्सी करने की आवश्यकता है। देखो अंक #4

संबंधित जानकारी

प्रवासन गाइड

v2 से v3 . तक

  • अपडेट |_+_| फ़ाइल पास करने के लिए |_+_| डिफ़ॉल्ट प्रीप्रोसेसर बनाते समय तर्क। देखो परिवर्तन , सामान्य तौर पर नया तरीका है:
import Hello from '../../components/Hello.vue' import { mountCallback } from 'cypress-vue-unit-test' describe('Several components', () => { const template = ` ` const components = { hello: Hello, } beforeEach(mountCallback({ template, components })) it('greets the world 3 times', () => { cy.get('p').should('have.length', 3) }) })

अन्य ढांचे के लिए टेस्ट एडेप्टर

योगदानकर्ताओं

विवरण डाउनलोड करें:

लेखक: बहमुटोव

सोर्स कोड: https://github.com/bahmutov/cypress-vue-unit-test

#vuejs #vue #javascript

aol ईमेल सेटिंग्स android

यह सभी देखें:

नई वस्तुएं

सबसे पठनीय

संपादक की पसंद