Reactjs 当用JEST/ENZYME单击按钮时，如何测试函数是否被调用

我想测试在单击按钮时是否调用组件中的，但我未通过测试，单击时收到0次调用

test('when clicked popUphandler function is called', () => {
    let popUpHandler = jest.fn();
    const wrapper = mount(<StaticRouter><Header popUpHandler={popUpHandler}/></StaticRouter>)
    wrapper.find('.header__navClosed').simulate('click');

    expect(popUpHandler).toBeCalled(); 
})

test（'当单击调用popUphandler函数时，（）=>{
设popUpHandler=jest.fn（）；
const wrapper=mount（）
wrapper.find（'.header\uu navClosed'）.simulate（'click'）；
expect（popUpHandler）.toBeCalled（）；
})

函数头（）{
const[isPopUp，setPopUp]=useState（false）；
常量popUpHandler=（）=>{
setPopUp（！isPopUp）；
};
返回(
{isPopUp===false？
: 
}
);
};

看起来问题在于忘记调用

popUpHandler

回调属性。只要调用该道具，它就会按预期工作：

功能标题（道具）{
const[isPopUp，setPopUp]=useState（false）；
常量popUpHandler=（）=>{
setPopUp（！isPopUp）；
//从'props'参数调用回调
props.popUpHandler（）；
};
返回(
{isPopUp===false？
: 
}
);
};

如果以不受控制的方式保持组件，您可以切换测试以检查可用的DOM，如下所示：

//检查您的按钮是否已关闭
expect（wrapper.find（'.header\uu navClosed'）.length）.toBe（0）；

我有点困惑，我的组件正在工作，我没有试图将任何内容传递到标题中。我只想模拟一次单击，然后检查函数popUpHandler是否被调用。但对于已接收的调用，它显示为0。问题是您编写了具有非受控样式的组件，但您作为受控类型进行了测试，这使得您的测试无法工作。如果您仍然选择非受控组件，您可能需要切换到检查DOM是否可用（单击后检查DOM是否可用）或使您的组件处于受控状态。我为您删除了另一个测试非受控组件的提示。不过，我已经在这方面做了成功的测试，谢谢。但有人告诉我，尽管这是可行的。我还应该编写一个测试来显示popUpHandler函数也被调用。@Bpun1p如果您的测试是“单击”按钮并且处理程序更新状态，并且您可以断言UI已更新，那么我认为这就足够了。该函数和代码行将显示在代码覆盖率报告中。

Header

不使用任何道具，因此在测试中将

popUpHandler={jest.fn（）}

道具传递给它并不意味着什么。您可以针对按钮，模拟单击，等待状态更新，并断言

wrapper.find（'.header\uu navClosed'）

现在为null或长度为0，或者您现在可以找到“导航”testid。我已经使用toHaveLength（#）创建了一个测试，但我认为我还应该测试是否调用函数popUpHandler只是为了显示，即使我知道按钮和导航之间的切换正在工作。但是为了将来的目的，如果我想检查组件中的函数是否被调用，我该怎么做？你应该通过与它的API（即道具和UI）交互来测试你的UI组件。如果要测试该按钮，请在UI中切换某些内容，然后测试该按钮。IMO酶使你在处理组件的内部组件时也会纠缠不清，因此很难认为测试是有效的，因为其他应用程序和用户交互的方式完全不同。组件和用户不会触及其他组件，也不会调整内部状态和实现细节。哦，好吧，我明白你的意思。谢谢，我知道这有点离题，但我强烈建议您查看UI组件测试。虽然我会警告你，来自酶的测试会让你感觉很奇怪，但一旦你更好地理解了如何考虑测试你的UI，它就会变得更有意义，而且，我的观点是，它可以让你编写更清晰、更有效的测试。

function Header() {
    const [isPopUp, setPopUp] = useState(false);

    const popUpHandler = () => {
        setPopUp(!isPopUp);
    };

    return (
        <div className='header'>
            {isPopUp === false ? 
                <button className='header__navClosed' onClick={popUpHandler}>
                    </button> 
                : 
                <Nav data-testid='navigation' popUpHandler={popUpHandler}/>
            }
        </div>
    );
};