React-testing-library: Can't get simple test to work with Redux

[RyanAtViceSoftware]

• @testing-library/react version:
  9.5.0
• react version:
  16.13.1
• node version:
  v12.13.0
• npm (or yarn) version:
  6.14.5

Relevant code or config:

import React from 'react'
import { Provider } from 'react-redux'
import { combineReducers, createStore } from 'redux'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'

const initialState = {}

function reducer(state, action) {
    if (typeof state === 'undefined') {
      return initialState
    }

    // For now, don't handle any actions
    // and just return the state given to us.
    return state
  }

it('renders welcome message', () => {
    const store = createStore(combineReducers({ foos: reducer }))

    const { getByText } = render(
        <Provider store={store}>
            <h1>hi</h1>
        </Provider>
    )

    expect(getByText('hi')).toBeInTheDocument()
})

What you did:

Tried to wire up a basic test with react, redux and rtl.

What happened:

Got this error

 Provider(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render noth
ing, return null.

      20 |      const store = createStore(combineReducers({ foos: reducer }))
      21 | 
    > 22 |      const { getByText } = render(
         |                            ^
      23 |              <Provider store={store}>
      24 |                      <h1>hi</h1>
      25 |              </Provider>

      at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:14348:23)
      at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:16762:28)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17542:5)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18596:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3)
      at node_modules/react-dom/cjs/react-dom.development.js:24758:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at node_modules/@testing-library/react/dist/pure.js:86:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
      at render (node_modules/@testing-library/react/dist/pure.js:82:26)
      at Object.<anonymous> (src/_tests_/App.test.js:22:24)

Reproduction:

1. clone: https://github.com/vicesoftware/react-redux-hooks-boilerplate/tree/testing-setup
2. cd webapp
3. npm install
4. npm test

webapp/src/_tests_/App.test.js should fail

Problem description:

Because I can't test apps with redux.

Suggested solution:

Hopefully get this working. I'm guessing it's a config but probably helpful to have this issue solved so others can google the fix.

[DenizUgur]

Have you found a solution to this?

[RyanAtViceSoftware]

@DenizUgur no not yet. Are you having same issue?

[DenizUgur]

Similar. It happens only when I try to generate a coverage report.

[RyanAtViceSoftware]

I think I saw a thread about the coverage report issue somewhere

[betofigueiredo]

@RyanAtViceSoftware I tested your code here and it worked, but I'm using a different version of @testing-library/react: 9.3.2. I didn't try it with 9.5.0, so I can't tell you if it's a version problem, but it's worth a try.

[satyendrasingh8]

I'm also facing same issue

[kentcdodds]

Unfortunately this has nothing to do with React Testing Library. You get the same issue when using ReactDOM directly:

My guess is there's some tooling issue going on here. Everyone who's commented here is probably experiencing some variant on the same problem. If you update to the latest of jest/babel then this should probably go away.

In any case, there's nothing we can do within React Testing Library because it's unrelated, so I'm going to close this issue. Good luck!

[shashankKeshava]

I'm facing the same issue with ` "@testing-library/react": "^10.2.0",

The render simply returns
<body> <div /> </body>

[shashankKeshava]

Figured out that I was mocking one of the dependencies of the component. After importing the asset it fixed my issue.