I have a custom hook I wrote and I am trying to test just the hook itself but I need to wrap it inside of a Provider. see error below
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
Below is my custom hook.
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;
The test that I am workign on looks like this right now.
describe('useSelectedTable', () => {
test('Should get current selected table', () => {
const { result } = renderHook(() => useSelectedTable());
console.log(result.all);
});
});
any thoughts?
Since you hook uses redux you will need to add a wrapper that has the store on it, something like this:
const store = {} // whatever you to do test your mock store today
const wrapper = ({ children }) => <Provider store={store}>{children}</Provider>
renderHook(() => useSelectedTable(), { wrapper });
here is the docs that talk about adding the wrapper with react hooks https://react-hooks-testing-library.com/usage/advanced-hooks#context