लारवेल मिक्स के लिए जेस्ट टेस्टिंग फ्रेमवर्क को कैसे कॉन्फ़िगर करें

यह लेख laravel-mix@0.11.3 और jest@19.0.2 के लिए लिखा गया था

मिक्स एक नया टूल है जो आपको सीधे वेबपैक एपीआई को छूने के बिना आपके लारवेल एप्लिकेशन के लिए फ्रंट-एंड एसेट्स बनाने में मदद करता है।

हालाँकि यह कुछ हद तक माना जाता है, लेकिन वास्तव में यह मिक्स को अनुकूलित करने या इसे अन्य उपकरणों के साथ एकीकृत करने में बहुत प्रयास नहीं करता है। यहां हम लोकप्रिय परीक्षण ढांचे जेस्ट को कॉन्फ़िगर करने के तरीके पर एक नज़र डालेंगे।

जेस्ट क्यों?

जब तक आप Vue एकल फ़ाइल घटकों में नहीं आते, तब तक Jest कॉन्फ़िगर करने के लिए कम से कम प्रयास करता है। फेसबुक बैकिंग के साथ उद्योग में भी इसकी अच्छी गति है और यह क्रिएट रिएक्ट ऐप में एक आधिकारिक परीक्षण ढांचा है। जेस्ट में लोकप्रिय सूचनाएं जैसे ओएस नोटिफिकेशन, कैशिंग आदि प्रदान की जाती हैं और हाल के संस्करण बहुत तेज़ साबित होते हैं।

पहला कदम आवश्यक निर्भरता स्थापित करना है:

npm install --save-dev jest babel-jest

चलिए Jest को हमारी npm स्क्रिप्ट्स में जोड़ते हैं। हालाँकि, फ्रेमवर्क पहले से ही NODE_ENV वेरिएबल को टेस्ट करने के लिए सेट करता है, हम इसे यहाँ स्पष्ट रूप से पास करते हैं ताकि इसका मान गलती से आपके वातावरण से अधिक न निकले:

"परीक्षण": "क्रॉस-एनवोड NODE_ENV = टेस्ट जेस्ट",
"tdd": "npm रन टेस्ट - - वॉच - नोटिफाई",

इस बिंदु पर आप पहले से ही जेस्ट को चला सकते हैं और बैबेल-जेस्ट ट्रांसफार्मर स्थापित होने के साथ ही यह आपकी जावास्क्रिप्ट फ़ाइलों को ट्रांसपाइल करने का भी प्रयास करेगा, लेकिन हमारा सेटअप अभी तक काफी नहीं है।

सबसे पहले, हम यह सुनिश्चित करना चाहते हैं कि Jest doesn’t’t प्रक्रिया को अनावश्यक फाइलों को अपने पैकेज में जोड़कर सुनिश्चित करें।

"जेस्ट": {
  "जड़ें": ["<रूटडिर> / संसाधन / संपत्ति / जेएस /"]
}

यह जेस्ट को केवल विशिष्ट निर्देशिका में फ़ाइलों की तलाश करने का निर्देश देगा।

दूसरी बात, बैबेल-जेस्ट वास्तव में नहीं जानता है कि लारवेल मिक्स की वजह से कैसे आगे बढ़ना है, इसकी बैबल सेटिंग्स को उजागर नहीं करना है। हमारी परियोजना में आवश्यक सेटिंग्स खींचने के लिए स्रोत पर गोता लगाएँ।

अब, यह एक फ़ाइल है कि ट्रांसफ़ॉर्मेशन करते समय बेबल-जेस्ट अपने आप उठ जाएगा। हालाँकि, यह काम नहीं करेगा क्योंकि जबकि वेबपैक 2.0+ ES6 मॉड्यूल को संसाधित कर सकता है, Node.js नहीं कर सकता है और ऐसे अन्य विकल्प भी हो सकते हैं जिन्हें हम विशेष रूप से अपने परीक्षणों के लिए लागू करना चाहते हैं। हम जो उपयोग करना चाहते हैं, वह है .babelrcv विकल्प जो विशिष्ट वातावरण के लिए विन्यास को मर्ज करेगा:

उपरोक्त सेटअप के साथ, बाबेल-जेस्ट को कॉमन जेजेएस के लिए आयात विवरण बदलने की आवश्यकता होती है।

अगर किसी भी तरह से, आप पहले से ही अपने .babelrc को ओवरराइड कर चुके हैं और डायनेमिक आयात सिंटैक्स प्रस्ताव का उपयोग करते हैं, तो परीक्षण वातावरण के लिए इसे बैबल-प्लगइन-डायनामिक-इंपोर्ट-नोड के साथ बदलना सुनिश्चित करें।

अब आप अपने Laravel एप्लिकेशन में Jest का उपयोग करने के लिए तैयार हैं। आप अधिक जानकारी के लिए उनके प्रलेखन के साथ पालन कर सकते हैं। परीक्षण निष्पादित करने के लिए, चलाएं:

npm परीक्षण

इस लेख के बाकी हिस्सों में जेस्ट का उपयोग करते समय कुछ अधिक लोकप्रिय ट्रिक्स और गोचा को संबोधित किया जाएगा। जब तक आप संबंधित समस्याओं का सामना नहीं करेंगे तब तक इन वर्गों को छोड़ने के लिए स्वतंत्र महसूस करें।

How to Make Jest से अवगत कराया

कहते हैं कि आप इस तरह से आयात के साथ एक दीवार मारा:

'' ./../../../MyComponent.vue 'से MyCompords आयात करें

और कुछ और अधिक सुंदर चाहते हैं। आप सामान्य नोड_मॉडल के अलावा पसंद की निर्देशिका में साझा मॉड्यूल की तलाश के लिए लारवेल मिक्स में अंतर्निहित वेबपैक उदाहरण को कॉन्फ़िगर करते हैं:

.webpackConfig ({
  संकल्प: {
    मॉड्यूल: [path.resolve (__ dirname, 'संसाधन / संपत्ति / js / मॉड्यूल'), 'node_muules']
  }
})

फिर, यह मानकर कि आपका घटक सीधे मॉड्यूल निर्देशिका के अंतर्गत स्थित है, अब आप इसे अधिक रसीले तरीके से आयात कर सकते हैं:

'MyComponent.vue' से आयात करें

इन शेंनिगों के बारे में जेस्ट को अवगत कराने के लिए, बस अपने पैकेज में मॉड्यूलडायरेक्टरीज विकल्प जोड़ें।

"जेस्ट": {
  "जड़ें": ["<रूटडिर> / संसाधन / संपत्ति / जेएस /"],
  "मॉड्यूलडायरेक्टरीज": ["संसाधन / संपत्ति / जेएस / मॉड्यूल", "नोड_मॉड्यूल्स"]
}

स्थैतिक संपत्ति का मजाक कैसे करें?

हालांकि संभावना नहीं है, आप स्थैतिक संपत्ति आयात करने वाली फ़ाइलों का परीक्षण कर सकते हैं। हम इन परिसंपत्तियों को इस तरह सुरक्षित रूप से नकली कर सकते हैं:

{
  "जेस्ट": {
    "जड़ें": ["<रूटडिर> / संसाधन / संपत्ति / जेएस /"],
    "modNameMapper": {
      "\ n।
      "
    }
  }
}

और नकली खुद को फाइल करता है:

संसाधन / आस्तियों / जे एस / हंसी / mocks / styleMock.js

मॉड्यूल। निर्यात = {}

संसाधन / आस्तियों / जे एस / हंसी / mocks / fileMock.js

मॉड्यूल.एक्सपोर्ट्स = 'टेस्ट-फाइल-स्टब'

Vue एकल फ़ाइल घटकों का परीक्षण कैसे करें (प्रायोगिक)

हम क्रिस्टियन कारलेसो द्वारा लिखे गए इस अद्भुत लेख से प्रेरणा लेंगे।

सबसे पहले, संसाधनों / आस्तियों / js / jest / ट्रांसफार्मर निर्देशिका में कस्टम vue-jest.js ट्रांसफार्मर बनाएं:

फिर आपको पैकेज संपादित करें। json jest config:

"जेस्ट": {
  "जड़ें": ["<रूटडिर> / संसाधन / संपत्ति / जेएस /"],
  "modNameMapper": {
    "^ vue $": "vue / dist / vue.common.js"
  },
  "रूपांतर": {
    "
    "^ ^ + \\। js $": "बैबल-जेस्ट"
  },
  "कवरेजपाथीनैगोरेपार्टर्न": ["<रूटडिर> / संसाधन / संपत्ति / जेएस / घटक"]
}

यहाँ हम Jest को निर्देश देते हैं कि vue फ़ाइलों को बदलें और Vue को रनटाइम-केवल बिल्ड के बजाय पूर्ण करने के लिए हल करें (क्योंकि यह वही है जो लारावेल मिक्स हुड के तहत कर रहा है)।

ध्यान दें, कि हम कोड कवरेज करते समय Vue घटकों को भी अनदेखा करते हैं। जेस्ट के साथ ज्ञात समस्या के लिए गलीचा समाधान के तहत यह एक बहुत झाड़ू है जो इसे ठीक से नहीं कर रहा है। हालांकि, अगर आप इसे ठीक करना जानते हैं, तो टिप्पणी करने के लिए स्वतंत्र महसूस करें।

बस। लारवेल मिक्स एंड जेस्ट के साथ अपनी यूनिट टेस्टिंग वर्कफ़्लो का आनंद लें।