开玩笑无法使用toHaveProperty验证是否存在 [英] Jest not able to verify presence for a proeprty using toHaveProperty

问题描述

我正在使用Jest和酶，执行 .debug（）时，它的结构下方有一个反应组件。

I am using Jest and enzyme, I have a react component, below its structure when performing .debug().

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

我正在使用以下代码尝试测试 NavLink 有一个属性到，值 / 。

I am using the following code to try to test if NavLink has a property to with value /.

找不到属性（我相信当使用浅层安装组件时，该对象会用其他属性装饰[下面的代码]）。

The property is not found (I believe when the component is mounted using shallow the object is decorated with other properties [code below]).

我需要知道如何通过 debug（）函数返回的属性来测试属性。

I need to know how to test the property like would be returned by the debug() function.

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

测试用例返回的对象版本：

Object version returned by the test case:

  {"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}

推荐答案

您可以尝试使用 .get（）（或 .first（） 在第二个示例中）从 .find（）返回的数组中获取特定元素，并使用 .props 来直接在 .find（）中查找属性或传递和对象以进行搜索。

You could try to use .get() (or .first() in the second example) to take a specific element from the array returned by .find() and use .props to check for a property or passing and object to search directly in .find().

文档：

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)
      })

这篇关于开玩笑无法使用toHaveProperty验证是否存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！