En utilisant l'enzyme, Comment trouver un composant enfant dans un composant réac-natif

Question

Je suis nouveau à React-native et à l'enzyme, j'essaie de créer un composant personnalisé ici. Je vais afficher une image basée sur this.props.hasIcon. J'ai défini la valeur par défaut des accessoires pour hasIcon comme true. Quand je vérifie Image existe dans l'enzyme ShallowWrapper. Je reçois false.

tlProgress.js

class TLProgress extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     {this.renderImage} 
     {this.renderProgress} 
     </View> 
    ); 
    } 
} 

TLProgress.defaultProps = { 
    icon: require("./../../img/logo.png"), 
    indeterminate: true, 
    progressColor: Colors.TLColorAccent, 
    hasIcon: true, 
    progressType: "bar" 
}; 

et renderImage() a le Image

renderImage() { 
    if (this.props.hasIcon) { 
     return <Image style={styles.logoStyle} source={this.props.icon} />; 
    } 
} 

Si je vérifie Image existe en enzyme am obtenir de faux.

tlProgress.test.js

describe("tlProgress rendering ",() => { 
    let wrapper; 
    beforeAll(() => { 
     props = { indeterminate: false }; 
     wrapper = shallow(<TLProgress {...props} />); 
    }); 

    it("check progress has app icon",() => { 
     expect(wrapper.find("Image").exists()).toBe(true); // fails here.. 
    }); 
}); 

Answer 1

Vous n'êtes pas appeler la Fonction renderImage dans votre render() - vous avez oublié les parenthèses, ainsi il est interprété comme une variable indéfinie. Tobe (vrai) (Je suppose que vous voulez appeler renderProgress() et non renderProgress ainsi)

class TLProgress extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     {this.renderImage()} 
     {this.renderProgress()} 
     </View> 
    ); 
    } 

Answer 2

Vous recherchez une balise appelée 'image' au lieu de chercher votre composant image

Il devrait être:

import Image from '../Image'; 
wrapper.find(Image) //do your assert here