परीक्षण renderIntoDocument

Question

मैं परीक्षण लिए सीख रहा हूँ के साथ कार्यात्मक घटकों ReactTestUtils लाइब्रेरी का उपयोग कर प्रतिक्रिया राज्यविहीन घटकों। यह मेरा सरल घटक है:

import {expect} from 'chai'; 
import React from 'react'; 
import ReactTestUtils from 'react-addons-test-utils'; 
import Greeter from '../Greeter'; 

describe('Greeter Components',() => { 
    it('renders correctly',() => { 
    var component = ReactTestUtils.renderIntoDocument(<div> 
     <Greeter name="Vamsi" place="Hotel California"/> 
    </div>); 

    var hasH1 = ReactTestUtils.findRenderedDOMComponentWithTag(component,'h1'); 
expect(hasH1).to.be.ok; 
    }); 
}); 

मैं त्रुटि मिलती है: renderIntoDocument काम कर पाने के लिए

import React from 'react'; 

const Greeter = ({name,place}) => (
    <h1>Hello,{name}. Welcome to the {place}.</h1> 
); 

export default Greeter; 

यह मेरा परीक्षण कल्पना है, मैं एक div में मेरी स्वागतकर्ता घटक सुझाव here के रूप में लिपटे

findAllInRenderedTree (...): उदाहरण एक समग्र घटक होना चाहिए।

मैं अपना कोड जेएसबीएन here के रूप में प्रदान कर रहा हूं।

Answer 1

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

यह सब कहने के लिए है कि आप टेस्ट यूटिल्स फ़ंक्शन या मूल घटकों का उपयोग "मूल" घटक के रूप में नहीं कर सकते हैं, जो आप प्रस्तुत कर रहे हैं। इसके बजाय आप अपने फ़ंक्शन घटकों को एक रैपर घटक में लपेटना चाहेंगे जो createClass का उपयोग करता है या React.Component बढ़ाता है। teaspoon:

class Wrapper extends React.Component { 
    render() { 
    return this.props.children 
    } 
} 

let component = renderIntoDocument(<Wrapper><Greeter /></wrapper> 

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

Answer 2

<div> में कार्यात्मक घटकों को लपेटना मेरे लिए काम करता है। तुम बस, मेरे दो घटक आप थोड़ा अलग तरीके से परीक्षण करना चाहते हैं, यानी

const props = { p1: "1" } 
test('Foo renders correctly classed div',() => { 
    const cpt = TestUtils.renderIntoDocument(<div><Foo {...props} /></div>); 
    const myNode = ReactDOM.findDOMNode(cpt.childNodes[0]); 
    expect(myNode.className).toBe('my-class'); 
}); 

सूचना है कि आप cpt.childNodes[0]

Answer 3

का उपयोग कर आदेश में सुधार करने के लिए @ आश्रम-जैसे आतंक के जवाब के परीक्षण के लिए myNode लक्षित कर सकते हैं के लिए खोज करने के लिए है सेंट:

आपको इसके लिए कक्षा बनाने की आवश्यकता नहीं है। इसे गतिशील रूप से करें:

import createReactClass from 'create-react-class'; 

// need to be a class component 
const Clazz = createReactClass({ 
    render:() => { 
    return <YourFunctionalComponentName {...props} />; 
    }, 
}); 

ReactTestUtils.renderIntoDocument(<Clazz />);