add test to verify that docs suggestion of putting a connected compon…

…ent above the hooks component allows dealing with stale props

test/hooks/useSelector.spec.js

@@ -7,7 +7,8 @@ import * as rtl from 'react-testing-library'
 import {
   Provider as ProviderMock,
   useSelector,
-  shallowEqual
+  shallowEqual,
+  connect
 } from '../../src/index.js'
 import { useReduxContext } from '../../src/hooks/useReduxContext'
 
@@ -333,6 +334,47 @@ describe('React', () => {
 
           spy.mockRestore()
         })
+
+        it('allows dealing with stale props by putting a specific connected component above the hooks component', () => {
+          const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+          const Parent = () => {
+            const count = useSelector(s => s.count)
+            return <ConnectedWrapper parentCount={count} />
+          }
+
+          const ConnectedWrapper = connect(({ count }) => ({ count }))(
+            ({ parentCount }) => {
+              return <Child parentCount={parentCount} />
+            }
+          )
+
+          let sawInconsistentState = false
+
+          const Child = ({ parentCount }) => {
+            const result = useSelector(({ count }) => {
+              if (count !== parentCount) {
+                sawInconsistentState = true
+              }
+
+              return count + parentCount
+            })
+
+            return <div>{result}</div>
+          }
+
+          rtl.render(
+            <ProviderMock store={store}>
+              <Parent />
+            </ProviderMock>
+          )
+
+          store.dispatch({ type: '' })
+
+          expect(sawInconsistentState).toBe(false)
+
+          spy.mockRestore()
+        })
       })
 
       describe('error handling for invalid arguments', () => {