Question

我正在使用Jest和酶，我有一个反应组件，在执行.debug()时低于其结构。

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

我使用以下代码尝试测试NavLink是否具有值为to的属性/。

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

我需要知道如何测试属性，就像debug()函数返回的那样。

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

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

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

Answer 1

您可以尝试使用.get()（或第二个示例中的.first()）从.find()返回的数组中获取特定元素，并使用.props进行检查直接在.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)
      })

Answer 2

这可能是竞争条件，测试是在NavLink拥有该属性之前检查它。有关详细信息，请查看Jest在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();
});

Jest无法使用toHaveProperty验证是否存在

2 个答案: