我想测试一个自定义钩子,它是作为一个帮助函数实现的,用于与其他钩子的代码重用。它在其实现中调用useDispatch
和useSelector
,沿着将数据保存在会话存储中:
export function useCustomHook(key, obj)
{
let myObject = {
somefield: obj.someField
};
sessionStorage.setItem(key, JSON.stringify(myObject));
const dispatch = useDispatch();
dispatch(actionCreator.addAction(key, myObject));
}
测试:
it('should have data in redux and session storage', () =>
{
const obj = {
somefield: 'my val',
};
renderHook(() => useCustomHook('some key', obj));
let savedObj= JSON.parse(sessionStorage.getItem('some key'));
expect(savedObj.someField).toBe('my val');
renderHook(() =>
{
console.log("INSIDE");
let reduxObj = useSelector(state => state.vals);
console.log("THE OBJECT: " );
console.log(reduxObj);
expect(reduxObj).toBe(2); //just to see if it fails the test - it's not
});
})
无论我尝试什么,测试都只到达“INSIDE”控制台日志,而不会打印“THE OBJECT:“控制台日志。测试本身仍然通过,所以就像useSelector
以某种方式停止了其余的renderHook执行。
我猜这和测试没有连接商店有关。。在这种情况下,可以做些什么来测试redux?
2条答案
按热度按时间rhfm7lfc1#
您需要提供一个
wrapper
组件,将reduxProvider
与store
连接起来:顺便说一句,
renderHook
正在捕获错误,这就是为什么你在测试中看不到它们,如果你试图访问result.current
,它会抛出,你可以看到它在result.error
中表示,但是这里的用法是不从自定义钩子返回一个值来Assert是非常不寻常的。这也可能会因为在第二个
renderHook
调用中有Assert而导致问题。您可能希望从钩子返回值并在外部Assert,或者在redux存储中Assert更新后的值。soat7uwm2#
您可以编写一个简单的扩展redux
renderWithProviders
函数。这看起来像:请注意,
render
方法被替换为来自@testing-library/react
的renderHook
。这可以在你的测试中简单地使用:hooks testing library talk about this briefly as well虽然解决方案需要更多的锅炉板在每个测试然后redux主张一个。