वेबपैकर और जेस्ट के साथ रेल 5.1 में जावास्क्रिप्ट परीक्षण कैसे सेटअप करें

वेबपैकर के साथ 5.1 जहाजों की सवारी करता है, जो डायनासोर की तरह अपने आप को गूंजते हुए जावास्क्रिप्ट में गलती से ठीक करने में सक्षम बनाता है - इरेटा, ईसीएमएस्क्रिप्ट- टार पिट जो शांत सहस्राब्दी इन दिनों में तैर रहे हैं।

वेबपैकर के साथ परीक्षण को सेटअप करने के बारे में बहुत अधिक दस्तावेज नहीं हैं, इसलिए मुझे लगा कि मैं क्रॉनिकल हूं कि मैं आखिरकार कैसे काम कर पाया। मैंने जेस्ट की कोशिश करने का फैसला किया, विशेष रूप से बिना किसी कारण के, भले ही मैं रिएक्ट का उपयोग नहीं कर रहा हूं।

अस्वीकरण: जब मैं इस सामान की बात करता हूँ तो मैं निश्चित रूप से नया हूँ। यह सब कुछ JSON और dotfiles से निर्मित एक Rube Goldberg मशीन की तरह महसूस होता है। इसलिए मुझे आश्चर्य नहीं हुआ (या नाराज) जब लोग मुझे बताते हैं कि मुझे यहाँ वर्णित कुछ हासिल करने का एक बेहतर तरीका है। वास्तव में, मुझे यह जानना अच्छा लगता है कि इस सेटअप को कैसे बेहतर बनाया जा सकता है।

1. जेस्ट स्थापित करें

सबसे पहले, अपने रेल प्रोजेक्ट की जड़ से इसे चलाकर जेस्ट को स्थापित करें।

यार्न जोड़ें - महादेव जेस्ट

एक सामान्य अभ्यास यह एक स्क्रिप्ट को सेटअप करने के लिए करता है जो आपके परीक्षण आदेशों को निष्पादित करता है। इसे अपने package.json फ़ाइल में जोड़ें:

"स्क्रिप्ट": {
  "परीक्षण": "जेस्ट"
},

और आप यार्न परीक्षण के साथ अपने परीक्षण चलाने में सक्षम होंगे। बेशक, इस बिंदु पर आप केवल यार्न के जेस्ट को चला सकते हैं, लेकिन यह सिर्फ मूर्खतापूर्ण है। तुम ऐसा क्यों करोगे।

2. जेस्ट को बताएं कि आपके परीक्षण कहां पाए जाएंगे

एक बात जो जेस्ट के बारे में अच्छी है, वह यह है कि आपकी परियोजना में परीक्षण फ़ाइलों के लिए यह कितनी आक्रामक है। उदाहरण के लिए, Jest आपकी परियोजना में * .spec.js या * .test.js से मेल खाने वाली सभी फ़ाइलों को निष्पादित करेगा ... जिसका अर्थ है कि config / webpack / test.js एक परीक्षण के रूप में चलाया जाएगा, जिससे Jest असफलता की सूचना देगा।

मेरा OCD मस्तिष्क इस तरह के ढीले-ढाले मेल को संभाल नहीं सकता है, इसलिए मैंने Jest को यह बताने के लिए मूल कॉन्फिग विकल्प का उपयोग किया कि केवल कल्पना / जावास्क्रिप्ट निर्देशिका में पाई गई परीक्षण फ़ाइलों को चलाने के लिए। यदि आप मेरी तरह हैं, तो इसे package.json में जोड़ें:

"जेस्ट": {
  "जड़ें": [
    "कल्पना / javascript"
  ]
},

आप परीक्षण फ़ाइल में स्टबिंग और इसे चलाकर सेटअप को अब तक सत्यापित कर सकते हैं। एक साधारण परीक्षण के साथ कल्पना / जावास्क्रिप्ट / sum.spec.js बनाएं:

परीक्षण ('1 + 1 बराबर 2', () => {
  उम्मीद (1 + 1) .toBe (2);
});

अब, यार्न परीक्षण चलाएं और आपको कुछ हरे रंग के आउटपुट को देखना चाहिए और महसूस करना चाहिए कि परिचित, संतोषजनक पावल्वियन प्रतिक्रिया जो केवल TDD प्रदान कर सकती है।

अद्यतन: मुझे पता चला है कि जड़ों में ऐप / जावास्क्रिप्ट जोड़ने से मुझे - वॉच ऑल फ्लैग का उपयोग करने में सक्षम बनाया गया है, जो फाइलों को बदलने पर परीक्षण चलाता है (जैसे गार्ड)। जोड़ा ज़ेन के लिए --notify फ्लैग के साथ गठबंधन करें to फिर भी यह पता लगाने की कोशिश कर रहा है कि काम करने के लिए कैसे-वॉच करें… not

3. सेटअप बैबेल

मैं भी आयात जैसे शांत सामान का उपयोग कर रहा हूं, जो बॉक्स से बाहर काम नहीं कर रहा है। मेरे चश्मे को चलाने से यह त्रुटि हुई:

SyntaxError: अप्रत्याशित टोकन आयात

इसने मुझे चौंका दिया - यह संभव है कि मैंने कुछ गलत कॉन्फ़िगर किया हो। लेकिन मुझे अंततः कुछ अतिरिक्त पैकेजों को स्थापित करके काम करना पड़ा:

यार्न जोड़ --देव बबेल-जेस्ट बेबल-प्रीसेट-एसस २०१५

और मेरे .babelrc फ़ाइल में "es2015" प्रीसेट (बोल्ड) जोड़ रहा है:

{
  "प्रीसेट": ["es2015",
    ["एनवी", {
      "मॉड्यूल": गलत,
      "लक्ष्य": {
        "ब्राउज़र": "> 1%",
        "बदसूरत": सच
      },
      "useBuiltIns": सच
    }]
  ],
"प्लगइन्स": [
    "वाक्य रचना-गतिशील आयात",
    ["रूप-वर्ग-गुण", {"युक्ति": सत्य}]
  ]
}

4. जेस्ट को बताएं कि आपके मॉड्यूल कहां रहते हैं

मुझे अपने स्पेक्स के भीतर से अपने मॉड्यूल के लिए पूरा रास्ता टाइप करने का विचार पसंद नहीं आया। मॉड्यूलडायरेक्टरीज सेटिंग का उपयोग जेस्ट को यह बताने के लिए किया जा सकता है कि मॉड्यूल कहां देखें, इसलिए मैंने इसे एप्लिकेशन / जावास्क्रिप्ट में अपने स्रोत फाइलों को इंगित किया। पैकेज में मेरा जेस्ट कॉन्फिगरेशन। इस तरह दिख रहा है:

"जेस्ट": {
  "जड़ें": [
    "कल्पना / javascript"
  ],
  "मॉड्यूलडायरेक्ट्रीज़": [
    "Node_modules",
    "एप्लिकेशन / javascript"
  ]
},

ध्यान दें: मॉड्यूलडायरेक्ट्रीज़ को दिया गया मान डिफ़ॉल्ट को ओवरराइड करता है, इसलिए आपको node_modules निर्देशिका को भी शामिल करना होगा।

अंतिम परिणाम बहुत प्यारा है, और बहुत बारीकी से मेरे RSpec सेटअप से मेल खाता है। उदाहरण के लिए, आपके पास एक स्रोत फ़ाइल एप्लिकेशन / जावास्क्रिप्ट / डायनासौर.जेएस हो सकता है:

डिफॉल्ट डिफॉल्ट क्लास {
  getExtinct () {
    सच लौटना;
  }
}

और एक मिलान परीक्षण फ़ाइल युक्ति / जावास्क्रिप्ट / डायनासौर.स्पेक। js:

'डायनासौर' से डायनासौर का आयात;
परीक्षण ('डायनासोर विलुप्त हैं', () => {
  उम्मीद ((नए डायनासोर) .isExtinct) .toBeTruthy ();
});

और यार्न परीक्षण बस वर्क्स ™ ™

बोनस रूड: जेस्ट टेस्ट चलाने के लिए सेटअप कोडशिप

मैं निरंतर एकीकरण के लिए कोडशिप का उपयोग करता हूं और सोचा कि यह मेरे RSpec सूट के अलावा मेरे जेस्ट सूट को चलाने के लिए निफ्टी होगा। यह बहुत आसान था।

मैंने इसे अपने सेटअप कमांड में जोड़ा:

एनवीएम स्थापित करें 8.4.0
यार्न स्थापित करें

और यह मेरे टेस्ट कमांड्स के लिए है:

यार्न परीक्षण

नीतो

सारांश

जैसा कि उल्लेख किया गया है, मैंने शायद यह सब एक गोल चक्कर में किया है। मुझे उन लोगों से प्रतिक्रिया या सुझाव पसंद आएगा जो वास्तव में जानते हैं कि वे क्या कर रहे हैं! एक टिप्पणी छोड़ दो या @kylefox ट्वीट करें।