Testing a custom hook with useSelector

user_15018590 0
Viewed 442

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?

react-hooks react-testing-library reactjs javascript
1 Answers

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

user_63879820
Related