testing react-redux useSelector

12
votes

I have a react application which uses react-redux, useSelector to get data from the store. The react component has 

function PersonDataView() {
  const name= useSelector(state => state.data.name)
  const dob= useSelector(state => state.data.dob)
  const dispatch = useDispatch()
  const show= () => dispatch({type: 'SHOW'})
  const remove= () => dispatch({type: 'REMOVE'})
  return (
    <div>
      <h2>Person Details</h2>
     <div>
      <button onClick={show}>Show</button>
      <span aria-label="name">{name}</span>
      <span aria-label="dob">{dob}</span>
      <button onClick={remove}>Remove</button>
     </div>
   </div>
  )
}

I am using react-testing-library to test this component. Is there any API which makes testing these components easier for us. I know two ways of testing these: 1) I can mock the store using redux-mock-store and then wrap this component under provider component. 2) mock the useSelector method in jest

jest.mock('react-redux', () => ({
  useSelector: () => ({
  })
});

But the problem using jest mock is in case of multiple selector, all the useSelectors will return same mocked value. Using jest way of mocking, jest.fn().mockReturnValueOnce() doesn't look correct to me.

3
reactjsunit-testingreact-reduxreact-hooks

3 Answers

13
votes

I'd suggest different approach - extracting your selectors into separate file, as e.g. file selectors.js:

const nameSelector = state => state.data.name;
const dobSelector = state => state.data.dob;

Then in test, you could mock useSelector as below:

jest.mock('react-redux', () => ({
  useSelector: jest.fn().mockImplementation(selector => selector()),
}));

And mock selectors separately, like:

jest.mock('./selectors.js', () => ({
  nameSelector: jest.fn().mockReturnValue("myTestName"),
  dobSelector: jest.fn().mockReturnValue("myTestDob"),
}));
1
votes

Try this:

jest.mock('react-router');
const useSelectorMock = useSelector as any;

describe('something', () {

test('name', () => {

// Use this for each useSelector call:
useSelectorMock.mockImplementationOnce(jest.fn(() => returnValue as yourType));
}

}
0
votes

Try this approach:

jest.mock('react-redux', () => ({
  useSelector: jest.fn().mockImplementation(func => func(store))
});

You should also add one layer here:

jest.mock('react-redux', () => {
  const store = {
    data: {
      name: { 
           ...
      },
      dob: {
           ...
      }
    }
  };