vendredi 13 novembre 2020

how do i test button that closes the component with jest/enzyme

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