testing-library / native-testing-library

🐳 Simple and complete React Native testing utilities that encourage good testing practices.
https://native-testing-library.com
MIT License
516 stars 44 forks source link

Stale Redux values when using reselect with useSelector #114

Closed adamlewkowicz closed 4 years ago

adamlewkowicz commented 4 years ago

Relevant code or config:

Not working version (with reselect and useSelector)

import { useSelector } from 'react-redux';
import { createSelector } from 'reselect'

const getCounter = createSelector(...);

const Component = () => {
  const counter = useSelector(getCounter);
}

Working version (with useSelector)

import { useSelector } from 'react-redux';

const Component = () => {
  const counter = useSelector(state => state.counter);
}

What you did:

Testing component that uses reselect with useSelector.

What happened:

When you use useSelector combined with reselect's selector, it doesn't update value returned by selector on data changes.

Reproduction:

import { useSelector } from 'react-redux';
import { createSelector } from 'reselect'

const getCounter = createSelector(...);

const Component = () => {
  const counter = useSelector(getCounter);
}

Problem description:

This issue only occurs while running tests, it works without any bugs on emulator/physical device. As described in Redux docs (https://react-redux.js.org/next/api/hooks#using-memoizing-selectors), using reselect's selector created outside of component and passing it to useSelector is correct approach and it shouldn't cause any issues.

Suggested solution:

Can you help us fix this issue by submitting a pull request?

adamlewkowicz commented 4 years ago

Upgrading react-redux from 7.1.0 to 7.2.0 fixed the issue.