React Navigation，如何测试Navlink的路径?

Question

我正试图编写一个测试来检查navlink的路径，但它一直失败的错误'wrapper.find…不是函数:

下面是我要测试的代码:

return (
<nav className='navbar'>
{ !isLoggedIn ?
<></>
:
<div className="topnav">
<div className="allShow">
<h2 id="idealMeTitle">idealMe</h2>
<h2 className="menuIcon" onClick={()=>openMenu()}>☰</h2>
</div>
<div className="myLinks" style={showStyle}>
<NavLink to='/calories' className='nav' activeClassName='current' onClick={()=>openMenu()}>Calories</NavLink>
<NavLink to='/details' className='nav' activeClassName='current' onClick={()=>openMenu()}>Details</NavLink>
<NavLink to='/progress' className='nav' activeClassName='current' onClick={()=>openMenu()}>Progress</NavLink>
<NavLink to='/recipe' className='nav' activeClassName='current' onClick={()=>openMenu()}>Recipe</NavLink>
<button id="logoutbtn" onClick={logout}>Logout</button>
</div>
</div>
}
</nav>
);
}

export default NavBar;

，这是我写的测试:

test('NavLinks paths', () => {
nav = wrapper.find('nav');
NavLink = wrapper.find('NavLink')
expect(wrapper.find('NavLink')).toHaveLength(4)
let firstNavLink = wrapper.find('NavLink').first();
let secondNavLink = wrapper.find('NavLink').second();
let thirdNavLink = wrapper.find('NavLink').third();
let fourthNavLink = wrapper.find('NavLink').fourth();
expect(firstNavLink.prop('path')).toEqual('/calories');
expect(secondNavLink.prop('path')).toEqual('/details');
expect(thirdNavLink.prop('path')).toEqual('/progress');
expect(fourthNavLink.prop('path')).toEqual('/recipe');
})

它失败的一些原因，我不确定，我已经查找了关于React导航测试的文档，但它使用memoryrouter，我不认为在这种情况下是需要的。

Answer 1

找到答案:

test('NavLinks paths 1', () => {
nav = wrapper.find('nav');
NavLink = wrapper.find('NavLink')
expect(wrapper.find('NavLink')).toHaveLength(4)
const firstNavLink = wrapper.find('NavLink').first();
expect(firstNavLink.prop('to')).toEqual('/calories');
})
test('NavLinks paths 2', () => {
nav = wrapper.find('nav');
NavLink = wrapper.find('NavLink')
expect(wrapper.find('NavLink')).toHaveLength(4)
const secondNavLink = wrapper.find('NavLink').at(1)
expect(secondNavLink.prop('to')).toEqual('/details');
})
test('NavLinks paths 3', () => {
nav = wrapper.find('nav');
NavLink = wrapper.find('NavLink')
expect(wrapper.find('NavLink')).toHaveLength(4)
const thirdNavLink = wrapper.find('NavLink').at(2)
expect(thirdNavLink.prop('to')).toEqual('/progress');

})
test('NavLinks paths 4', () => {
nav = wrapper.find('nav');
NavLink = wrapper.find('NavLink')
expect(wrapper.find('NavLink')).toHaveLength(4)
const fourthNavLink = wrapper.find('NavLink').at(3)
expect(fourthNavLink.prop('to')).toEqual('/recipe');
})

可以放到一个测试中，但不想