如何检查 jsx 标签中的道具是否存在？

Question

我正在尝试访问按钮标签中的道具，以便检查它是否存在。但它给了我一个属性 exists of undefined

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> //want to check if the onClick exists and what happens when i click onto it.
        </nav>
    )
};

    test('on click navigation will be null', () => {
        wrapper = mount(<MemoryRouter><Nav/></MemoryRouter>)

        expect(wrapper.find('button').at(3).exists()).toBeTruthy();  // PASS

        expect(wrapper.find('button').at(3).prop('onClick').exists()).toBeTruthy();  //FAIL
 
    })

Answer 1

Enzyme exists 仅适用于节点，检查 prop 是否存在并不是一项微不足道的任务，并且没有专门的方法来执行此操作。

一种检查道具是否存在的方法：

expect(wrapper.find('button').at(3).props()).toHaveProperty('onClick');

一种检查道具是否存在并已定义的方法：

expect(wrapper.find('button').at(3).props('onClick')).not.toBeUndefined();

编写此测试的正确方法是断言 prop 应该是什么，即函数：

expect(wrapper.find('button').at(3).props('onClick')).toEqual(expect.any(Function));

如何检查 jsx 标签中的道具是否存在？

how to check if the props in a jsx tag exists?

unit-testing

reactjs

jestjs

enzyme