Jest pas en mesure de vérifier la présence d'un proeprty en utilisant toHaveProperty

J'utilise Jest et enzyme, j'ai un composant de réaction, en dessous de sa structure lors de l'exécution .debug().Jest pas en mesure de vérifier la présence d'un proeprty en utilisant toHaveProperty

console.log src\shared\navigation\Navigations.test.js:20 
    <NavLink to="/" exact={true} activeStyle={{...}} activeClassName="active"> 
     Weather 
    </NavLink>

J'utilise le code suivant pour essayer de tester si NavLink a une propriété to avec une valeur /.

La propriété est introuvable (je crois que lorsque le composant est monté en utilisant peu profond l'objet est décoré avec d'autres propriétés [code ci-dessous]).

J'ai besoin de savoir comment tester la propriété comme serait retourné par la fonction debug().

it('shouldhave property home',() => { 
 
    const wrapper = shallow(
 
     <Navigations /> 
 
    ) 
 
    const test = wrapper.find(NavLink).first() 
 
    console.log(test.debug()) 
 
    expect(test).toHaveProperty('to', '/') 
 
    })

version objet retourné par le cas de test:

{"complexSelector": {"buildPredicate": [Function buildPredicate], "childrenOfNode": [Function childrenOfNode], "findWhereUnwrapped": [Function findWhereUnwrapped]}, "length": 1, "node": <NavLink activeClassName="active" activeStyle={{"color": "red", "fontWeight": "bold"}} exact={true} to="/">Weather</NavLink>, "nodes": [<NavLink activeClassName="active" activeStyle={{"color": "red", "fontWeight": "bold"}} exact={true} to="/">Weather</NavLink>], "options": {}, "renderer": null, "root": {"complexSelector": {"buildPredicate": [Function buildPredicate], "childrenOfNode": [Function childrenOfNode], "findWhereUnwrapped": [Function findWhereUnwrapped]}, "length": 1, "node": <div><withStyles(Drawer) classes={{"paper": "Navigations-drawerPaper-1"}} type="permanent"><div className="Navigations-drawerInner-3"><div … /><withStyles(Divider) … /><withStyles(ListItem) … /><withStyles(ListItem) … /></div></withStyles(Drawer)></div>, "nodes": [<div><withStyles(Drawer) classes={[Object]} type="permanent"><div … /></withStyles(Drawer)></div>], "options": {}, "renderer": {"_instance": {"_calledComponentWillUnmount": false, "_compositeType": 0, "_context": {}, "_currentElement": <withStyles(Navigations) />, "_debugID": 3, "_hostContainerInfo": null, "_hostParent": null, "_instance": {"_reactInternalInstance": [Circular], "context": [Object], "jss": [Jss], "props": [Object], "refs": [Object], "sheetOptions": [Object], "sheetsManager": [Map], "state": [Object], "stylesCreatorSaved": [Object], "theme": [Object], "unsubscribeId": null, "updater": [Object]}, "_mountOrder": 2, "_pendingCallbacks": null, "_pendingElement": null, "_pendingForceUpdate": false, "_pendingReplaceState": false, "_pendingStateQueue": null, "_renderedComponent": {"_currentElement": <div … />, "_debugID": 4, "_renderedOutput": <div … />}, "_renderedNodeType": 0, "_rootNodeID": 0, "_topLevelWrapper": null, "_updateBatchNumber": null, "_warnedAboutRefsInRender": false}, "getRenderOutput": [Function getRenderOutput], "render": [Function render]}, "root": [Circular], "unrendered": <withStyles(Navigations) />}, "unrendered": null}

Source

2017-10-03 Radex

Il est probablement une condition de course, où le test est le vérifier b avant NavLink a la propriété. Pour plus d'informations, consultez la documentation de Jest sur testing asynchronous code

it('shouldhave property home', (done) => { 
    const wrapper = shallow(
    <Navigations />, 
); 
    const test = wrapper.find(NavLink).first(); 
    console.log(test.debug()); 
    expect(test).toHaveProperty('to', '/'); 
    done(); 
});

Source

2017-10-03 14:04:52

Désolé ça ne fonctionne pas :( – Radex

@Jason, je ne pense pas que ce soit une condition de course, la propriété 'to' il est effectivement là comme la mention OP dans sa question. Vous pouvez voir la propriété dans cette version améliorée https://jsfiddle.net/wL8fg0Lh/ – GibboK

Pour déboguer le problème, faites 'console.log (test)' et voyez ce que c'est. Ensuite, ajoutez une attente explicite pendant 10 secondes, puis faites un autre 'console.log (test)' et voyez si quelque chose a changé. Si quelque chose a changé, alors vous savez que vous avez une condition de concurrence. –

Vous pouvez essayer d'utiliser .get() (ou .first() dans le second exemple) pour prendre un élément spécifique du tableau retourné par .find() et utiliser .props pour vérifier une propriété ou en passant et objet à rechercher directement dans .find().

Documents:

http://airbnb.io/enzyme/docs/api/ReactWrapper/get.html http://airbnb.io/enzyme/docs/api/ShallowWrapper/find.html

it('should have property home',() => { 
 
    const wrapper = shallow(<Navigations />) 
 
    expect(wrapper.find(NavLink).get(0).props.to).toEqual('/') 
 
    })

 it('should have property home',() => { 
 
     const wrapper = shallow(<Navigations />) 
 
     expect(wrapper.find(NavLink).find({ to: '/' }).first().length === 1).toEqual(true) 
 
     })

Source

2017-10-03 14:07:46 GibboK

Jest pas en mesure de vérifier la présence d'un proeprty en utilisant toHaveProperty

Répondre

Questions connexes