Testing a custom hook with useSelector

Question

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?

Does this answer your question? [How can I test a custom hook that is using the Redux hooks useDispatch and useSelector?](https://stackoverflow.com/questions/59442450/how-can-i-test-a-custom-hook-that-is-using-the-redux-hooks-usedispatch-and-usese) — Liam, May 19 '23 at 09:35

score 0 · Answer 1 · answered Apr 04 '22 at 22:32

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

Testing a custom hook with useSelector

1 Answers1