使用useSelector测试自定义挂钩

Question

我编写了一个自定义钩子，我试图只测试钩子本身，但我需要将其封装在Provider中。参见下方的错误

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

下面是我的定制挂钩。

import _ from 'lodash';
import { useSelector } from 'react-redux';
const useSelectedTable = () => {
const { tables, currentTableId } = useSelector((state: any) => {
return {
tables: state.tables,
currentTableId: state.currentTableId
};
});
const table = _.find(tables, tab => tab._id === currentTableId);
return table;
};
export default useSelectedTable;

我正在进行的测试现在看起来是这样的。

describe('useSelectedTable', () => {
test('Should get current selected table', () => {
const { result } = renderHook(() => useSelectedTable());
console.log(result.all);
});
});

有什么想法吗？

Answer 1

由于钩子使用了redux，因此需要添加一个带有存储的包装器，如下所示：

const store = {} // whatever you to do test your mock store today
const wrapper = ({ children }) => <Provider store={store}>{children}</Provider>
renderHook(() => useSelectedTable(), { wrapper });

以下是讨论添加带有react钩子的包装器的文档https://react-hooks-testing-library.com/usage/advanced-hooks#context