जेस्ट परीक्षण विफल रहता है: TypeError: window.matchMedia एक फ़ंक्शन नहीं है

Question

यह मेरा पहला फ्रंट-एंड परीक्षण अनुभव है। इस प्रोजेक्ट में, मैं जेस्ट स्नैपशॉट परीक्षण का उपयोग कर रहा हूं और मेरे घटक के अंदर TypeError: window.matchMedia is not a function त्रुटि मिली है।

मैं जेस्ट दस्तावेज के माध्यम से जाता हूं, मुझे "मैनुअल मैक्स" अनुभाग मिला, लेकिन मुझे अभी तक यह कैसे करना है इसके बारे में कोई जानकारी नहीं है।

Answer 1

जेस्ट ब्राउज़र वातावरण बनाने के लिए jsdom का उपयोग करता है। हालांकि JSDom window.matchMedia का समर्थन नहीं करता है, इसलिए आपको इसे स्वयं बनाना होगा।

जेस्ट का manual mocks मॉड्यूल सीमाओं के साथ काम करता है, यानी आवश्यकता/आयात विवरण, इसलिए वे window.matchMedia नकली करने के लिए उचित नहीं होंगे क्योंकि यह एक वैश्विक है।

1. अपने स्थानीय matchMedia मॉड्यूल जो window.matchMedia निर्यात को परिभाषित करें:

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

2. setup file परिभाषित करें जो वैश्विक विंडो में matchMedia के लिए एक नकली जोड़ता है।

इन विकल्पों में से किसी के साथ

आप एक नकली जो कम से कम अपने परीक्षण चलाने के लिए या आपको निजी तरीकों को आप की अनुमति देता है के साथ अपने स्वयं लिखने के लिए चाहते हो सकता है अगर आप अलग-अलग राज्यों अनुकरण करने के लिए आवश्यक अनुमति होगी के रूप में एक matchMedia polyfill इस्तेमाल कर सकते हैं कॉन्फ़िगर यह जेस्ट fs manual mock

Answer 2

मैं अपने हंसी परीक्षण फ़ाइल में एक matchMedia ठूंठ डाल (परीक्षण से ऊपर) है, जो की अनुमति देता है के लिए इसी तरह व्यवहार है परीक्षण पास करने:

window.matchMedia = window.matchMedia || function() { 
    return { 
     matches : false, 
     addListener : function() {}, 
     removeListener: function() {} 
    }; 
}; 

Answer 3

मैं करने के लिए इस तकनीक का इस्तेमाल किया गया है मकी का एक गुच्छा हल करें एनजी समस्याएं

describe("Test",() => { 
    beforeAll(() => { 
    Object.defineProperty(window, "matchMedia", { 
     value: jest.fn(() => { return { matches: true } }) 
    }); 
    }); 
}); 

या यदि आप हर समय इसे नकली करना चाहते हैं, तो आप अपने mocks फ़ाइल से कहा जाता है के अंदर डाल सकता है आपके package.json: "setupTestFrameworkScriptFile": "<rootDir>/src/tests/mocks.js",

रेफरी: setupTestFrameworkScriptFile