खिड़की/मोचा के साथ दस्तावेज़/चाय

Question

नकली कैसे मैं इकाई परीक्षण करने के लिए getElement समारोह

class BarFoo { 
    getElement() { 
     return document.querySelector('#barfoo'); 
    } 
} 

मोचा document बारे में कुछ भी पता नहीं है का प्रयास करते हैं, तो मैं सोचा आप कुछ इस तरह कर सकते हैं कि:

beforeEach(() => { 
    global.document = { 
     querySelector:() => { ... } 
    } 
} 

हालांकि यह काम करता है, मैं सोच रहा हूं कि यह सही दृष्टिकोण है और शायद इस समस्या को हल करने के लिए एक पैकेज उपलब्ध है, क्योंकि यदि अधिक ब्राउज़र एपीआई का उपयोग किया जाता है तो मेरा दृष्टिकोण श्रमिक हो सकता है?

Answer 1

कुछ विकल्प उपलब्ध आप के लिए कर रहे हैं:

विकल्प 1: उपयोग JSDOM

अपने कोड में एक डोम को जोड़ कर, आप कर सकते हैं Node.js

के भीतर अपने क्लाइंट-साइड कोड की इकाई परीक्षण ज्यादा

विकल्प 2: उपयोग MOCHA ग्राहक पर

मोचा ग्राहक अंदर चलती है और आप अलग क्लाइंट-साइड इकाई परीक्षण का उपयोग कर सकते हैं। यह मेरा पसंदीदा दृष्टिकोण होता है क्योंकि मैं विशिष्ट ब्राउज़रों के खिलाफ परीक्षण कर सकता हूं, न कि विशिष्ट जेएस इम्प्लांटेशन।

विकल्प 3: PhantomJS

PhantomJS का उपयोग करें यदि आप अपनी परीक्षण पर्यावरण के भीतर एक बिना सिर ब्राउज़र को नियंत्रित करने के लिए अनुमति देता है।

विकल्प 4: Headless Chrome

अब जब कि बिना सिर क्रोम बाहर है, PhantomJS मेंटेनर सेवानिवृत्त हो चुके हैं।

Answer 2

मैं परीक्षण आप क्या प्रस्तावित जब मैं सिर्फ खिड़की पर एक निश्चित समारोह नकली करने की जरूरत के समान लेखन किया गया है:

it('html test', function() { 
    const window = global.window; 
    global.window = {document: {querySelector: function() { return null; }}}; 
    let lib = require('lib-that-uses-queryselector'); 
    assert(true); 
    global.window = window; 
}); 

मैं अन्य परीक्षणों में mock-browser उपयोग किया गया है, जब मैं एक और अधिक पूरा खिड़की वस्तु चाहता था:

it('html test', function() { 
    const window = global.window; 
    let MockBrowser = require('mock-browser').mocks.MockBrowser; 
    global.window = new MockBrowser().getWindow(); 
    let lib = require('lib-that-uses-window'); 
    assert(true); 
    global.window = window; 
}); 

ध्यान दें कि आप शायद messing with globals के बाद खिड़की वस्तु (ऊपर global.window = window;) पुनर्स्थापित करना चाहते हैं।