प्रोसेस

Question

के साथ एक प्रतिक्रिया घटक का नकल करने के लिए जेस्ट का उपयोग करना मेरे पास एक प्रतिक्रिया घटक है जिसमें कुछ अन्य घटक शामिल हैं जो रेडक्स स्टोर आदि तक पहुंच पर निर्भर करते हैं, जो पूर्ण एंजाइम माउंट करते समय समस्याएं पैदा करता है। के इस तरह की एक संरचना मान लीजिए:

import ComponentToMock from './ComponentToMock'; 

<ComponentToTest> 
    ...some stuff 
    <ComponentToMock testProp="This throws a warning" /> 
</ComponentToTest> 

मैं जेस्ट के .mock() विधि का उपयोग करने उप-घटक बाहर नकली करना चाहते हैं, इतना है कि यह परीक्षण के लिए एक चिंता का विषय नहीं है।

मुझे पता है कि मैं की तरह कुछ के साथ एक सीधी घटक बाहर नकली कर सकते हैं:

jest.mock('./ComponentToMock',() => 'ComponentToMock');

लेकिन, जैसा कि इस घटक सामान्य रूप से रंगमंच की सामग्री प्राप्त होगा, प्रतिक्रिया परेशान हो जाता है, अज्ञात रंगमंच की सामग्री के बारे में चेतावनी (दे रही है इस मामले में, testProp) <ComponentToMock /> पर पारित किया जा रहा है।

मैंने इसके बजाए एक फ़ंक्शन वापस करने का प्रयास किया है, हालांकि आप जेएसएक्स (जिसे मैं बता सकता हूं) से जेस्ट मैक में वापस नहीं लौटा सकता है, क्योंकि इसे फहराया जा रहा है। यह इस मामले में एक त्रुटि फेंकता है।

तो मेरे सवाल का कैसे मैं या तो

क) यह करने के लिए पारित कर दिया रंगमंच की सामग्री की अनदेखी करने के ComponentToMock, या

ख मिलता है) लौट सकते हैं एक घटक प्रतिक्रिया है कि बच्चे घटक है कि मैं उपहास करने के लिए इस्तेमाल किया जा सकता है मैं परीक्षण के बारे में चिंतित नहीं हूँ।

या ... क्या कोई बेहतर तरीका है?

Answer 1

एक नोट उत्थापन व्यवहार को रोकने के लिए docs for jest.mock() के तल पर नहीं है:

नोट: जब babel-jest का उपयोग कर, स्वचालित रूप से किया जा कोड ब्लॉक के शीर्ष करने के फहराया जाएगा mock को कहता है। doMock का उपयोग करें यदि आप स्पष्ट रूप से इस व्यवहार से बचें।

फिर आप वर्णन कर सकते हैं जैसा कि आपने वर्णित किया है: उस फ़ंक्शन को वापस करें जो उस घटक का स्टब है जिसे आपको परीक्षण करने की आवश्यकता नहीं है।

jest.doMock('./ComponentToMock',() => { 
    const ComponentToMock =() => <div />; 
    return ComponentToMock; 
}); 

const ComponentToTest = require('./ComponentToTest').default; 

स्नैपशॉट में प्रस्तुत होने के बाद से स्टब घटक का नाम देना उपयोगी होता है।

Answer 2

मैंने इस सवाल से पूछा कि मैंने थोड़ा और सीखा है। यहां मॉकिंग घटकों से निपटने का एक वैकल्पिक (बेहतर?) तरीका है जिसे पारित करने की आवश्यकता है: मॉड्यूल नकली फ़ाइलों का उपयोग।

पहले घटक के फ़ोल्डर के तहत __mocks__ फ़ोल्डर में नकली करने के लिए घटक के समान नाम वाली फ़ाइल बनाएं।

. 
|- /ComponentToMock.js 
└- /__mocks__/ComponentToMock.js <-- create this folder/file! 

नोट: यह लेखन के समय, फ़ोल्डर बुलाया जाना चाहिए के रूप में लगता है __mocks__ (आप के लिए घटकों नकली करने की जरूरत है प्रत्येक फ़ोल्डर में __mocks__ बनाने की आवश्यकता होगी।अगर अंडरस्कोर आपको परेशान करते हैं, तो बस दिखाएं कि वे वहां नहीं हैं;))

अगला, इस नकली फ़ाइल में, आप अपनी इच्छानुसार फ़ाइल लिख सकते हैं, उदा। jest.mock('./ComponentToMock');

जब जेस्ट एक .mock() का सामना करना पड़ता दूसरा समारोह पैरामीटर के बिना, यह स्वतः ही एक __mocks__ फ़ोल्डर के लिए लग रहा है:

// This code would live in ./__mocks__/ComponentToMock.js 
import React from 'react'; 
const ComponentToMock = ({ testProp }) => <div>A mock with '{testProp}' passed!</div>; 
export default ComponentToMock; 

फिर परीक्षण फ़ाइल में, जेस्ट नकली बयान के बदल जाते हैं। हालांकि, यद्यपि नकली बयान परीक्षण किए जा रहे घटक में फहराया जाता है, यह नकली आयात के प्रभाव को प्रभावित नहीं करता है - इसलिए यह एक प्रतिक्रिया घटक आयात और संकलित करने में सक्षम क्यों है!

यह मज़ाक उड़ाया घटकों रंगमंच की सामग्री पारित किया जा करने की जरूरत है कि के लिए अच्छी तरह से काम करने लगता है, और नहीं तो प्रोप चेतावनी का उत्पादन होता अगर एक nulled समारोह वापस आ गया था (लेकिन जो अगर घटक रंगमंच की सामग्री प्राप्त नहीं होता है का उपयोग जारी रखना पूरी तरह से स्वीकार्य है)। मुझे आशा है कि इससे कुछ लोगों को वहां मदद मिलेगी।