React-testing-library: Errors using react-redux 7.1.0 with hook support

[dewyze]

I am trying to use react-testing-library to test some components built using react hooks and the new react-redux support.

I am not sure if this is supported or not, but thought I would ask.

Using the new support system, you no longer need to use connect or mapStateToProps. Instead, there is a useSelector feature.

I was able to successfully run your example for react redux, but when I try and use the new hooks syntax, it doesn't work. If I write a simple reducer, it works fine, but when I switch to use a root reducer built with combineReducers it fails. Because connect and mapStateToProps are no longer needed, I wouldn't be using the reducer specific to the component. The useSelector function takes the top level state and selects data from that.

So in the linked repo, if I were to use the reducer called counter, the test will pass, but then will fail when I uncomment the stuff to do dispatching.

• react-testing-library version:8.0.1
• react version: 16.8.6
• node version: 10.15.3
• npm (or yarn) version: npm 6.9.0

Relevant code or config:

Example test can be found here

What you did:

I just ran the test

What happened:

 FAIL  tests/components/counter/Counter.test.js                                                                                                                                  
  ✕ can render with redux with custom initial state (29ms)                                                                                                                       

  ● can render with redux with custom initial state                                                                                                                              

    An error occured while selecting the store state: Cannot read property 'value' of undefined.                                                                                 

       8 | function Counter() {                                                                                                                                                  
       9 |   // const dispatch = useDispatch()                                                                                                                                   
    > 10 |   const count = useSelector(state => state.counter.value)                                                                                                             
         |                 ^                                                                                               
      11 |                                                                                                                                                                       
      12 |   // const onIncrement = useCallback(() => dispatch({ type: "INCREMENT" }), [                                                                                          
      13 |   //   dispatch,                                                                                        

      at useSelector (node_modules/react-redux/lib/hooks/useSelector.js:91:11)                                                         
      at Counter (tests/components/counter/Counter.test.js:10:17)                                                      
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:12938:18)                                                             
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:15020:13)              
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:15625:16)                                        
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:19312:12)                                              
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:19352:24)                                                     
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:19435:7)                                                    
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:20342:7)                                                                    
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:20090:7)                                                                  
      at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:19911:5)                                                                
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:20572:3)                                                                                        
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:20600:10)                                            
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:20657:10)                                                        
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:20953:3)
      at node_modules/react-dom/cjs/react-dom.development.js:21090:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:20454:14)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:21086:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:21155:12)
      at node_modules/@testing-library/react/dist/index.js:83:25
      at Object.batchedUpdates$1 [as unstable_batchedUpdates] (node_modules/react-dom/cjs/react-dom.development.js:20439:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1161:27)

Reproduction:

https://github.com/dewyze/react-testing/blob/master/tests/components/counter/Counter.test.js

Problem description:

I believe this should work/be supported, but was not sure if that is the case or I am doing it wrong.

[dewyze]

I added a few more examples to the repo to clarify the cases

test("can render with counterReducer", () => {                     // PASSES
test("can render with counterReducer and dispatch", () => {        // FAILS
test("can render with rootReducer", () => {                        // FAILS
test("can render with rootReducer and dispatch", () => {           // FAILS

[dewyze]

Nevermind, this is my own error.

I previously had this:

function rootReducer() {
  return combineReducers({ counter: counterReducer })
}

But it should look like this:

const rootReducer = combineReducers({ counter: counterReducer })

Sorry for the noise!