时间戳

首页 > 解决方案 > React - 用 jest/enzyme 测试控制器组件

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

问题描述

我有点死胡同，因为我不确定应该如何测试这个特定的“组件”。所以基本上，我有一个控制器组件，它是一个顶级组件。它不接受任何道具，并且由路由组件呈现。控制器组件有几个功能，其中一些被传递到子组件并由事件处理程序触发。

此外，控制器组件使用附加到全局窗口对象的 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}
    />
)

}

标签： reactjstestingjestjsenzyme

解决方案

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

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

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

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

笔记

global在间谍中使用。global指窗户。

额外测试

除了这些测试之外，我建议对浅层渲染进行快照，以确保渲染始终正常工作。

推荐阅读