React-用jest/酶测试控制器组件

Question

我有点走不通，因为我不知道该如何测试这个特定的"组件"。所以基本上，我有一个控制器组件，它是一个顶级组件。它不需要任何道具，并且由路由组件渲染。控制器组件有几个函数，其中一些函数被传递到子组件中，并由事件处理程序触发。

此外，控制器组件使用附加到全局窗口对象的API。API接收一个回调函数，在方法运行后，当您调用API上的某些方法时，该函数将被调用。现在，我不知道该如何测试控制器。我已经测试了所有的子组件，并验证了一切都能工作，但控制器组件中的一些功能对于测试它们是否真的能工作至关重要。

const MyController = () => {
const [api, setApi] = useState(null)
useEffect(() => {
const globalApi = window.globalApi
setApi(globalApi)
init()
}, [])
function callBack(e) {
console.log(e)
}
function init() {
api.init(callBack)
}
function close() {
api.close()
}
return (
<MyComponent 
close={close}
/>
)

}

Answer 1

模拟你的api，看看它是否被调用

您可以从全局监视您的api调用(如果我正确阅读了您的代码(。然后你可以模拟实现它。

const apiCall = jest.spyOn(global.globalApi, 'init').mockImplementation(jest.fn);
expect(apiCall).toHaveBeenCalled();

你可以做几个测试。检查它调用了多少次，应该是一次。并检查它是用什么参数调用的。

备注

global在间谍活动中的使用。global是指窗口。

额外测试

除了这些测试之外，我建议制作一个浅层渲染的快照，以确保渲染始终有效。