Jest not able to verify presence for a proeprty using toHaveProperty

问题

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>

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]).

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}

回答1:

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().

Docs:

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

回答2:

It is probably a race condition, where the test is checking it before NavLink has the property. For more info, look at Jest's documentation on 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();
});

来源：https://stackoverflow.com/questions/46546237/jest-not-able-to-verify-presence-for-a-proeprty-using-tohaveproperty

标签

javascript

enzyme

jest