I am trying to test a button which when clicked, will close the navigation but because i am constantly calling wrapper to find the button, my navigation component renders immediately. I am not sure what i should be test here.
Basically im trying to check whether or not that button works but Nav keeps getting mounted because im calling it to check for nodes
react componnent
function Nav (props) {
return (
<nav className='header__nav'>
<Link to={'/login'}>
<button className='header__login'>LOGIN</button>
</Link>
<Link to={'/register'}>
<button className='header__register'>SIGN UP</button>
</Link>
<Link to={'/about-me'}>
<button className='header__aboutme'>ABOUT ME</button>
</Link>
<button className='close__nav' onClick={props.popUpHandler}></button>. //clicking this will close Nav function
</nav>
)
};
nav.test.js
test('on click navigation will be null', () => {
wrapper = mount(<MemoryRouter><Nav/></MemoryRouter>)
expect(wrapper.find('button').at(3).exists()).toBeTruthy();
wrapper.find('.close__nav').simulate('click');
// expect(wrapper.find('.close__nav').props.onClick)...."to return ()=>setPopUp(!isPopUp)"
// expect(wrapper.find('.close__nav')).toHaveLength(1);
})
Aucun commentaire:
Enregistrer un commentaire