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.

[JimLynchCodes]

@kentcdodds how can you say this is not related to React Testing Library??

React testing library is buggy, doesn't work, and you don't even care... SMH

[JimLynchCodes]

A good author would link to a working example of testing a react project with redux.

It should not be that hard!

I guess since it's not possible we should all go back to enzyme or move away from this soon-to-be-deprecated react testing library? 🤔

[alexkrolick]

Unfortunately we do not have the bandwidth to show examples for every possible build config, such as the the "react-app-rewired" system in the reproduction repo.

React Testing Library requires a working DOM context as a prerequisite, and so does Enzyme. This is usually set up via jest-dom, which is enabled by default in most Jest environments prior to 27, and can be enabled in 27+ via a config option "testEnvironment": "jsdom" : https://jestjs.io/blog/2021/05/25/jest-27#flipping-defaults.

The Redux team maintains an extensive guide to how to test using RTL, including setting up jest-dom: https://redux.js.org/usage/writing-tests#connected-components

We link to it here: https://testing-library.com/docs/example-react-redux

Does that help?

[dv-blk]

I had this error when my code contained jest.mock('react-redux') after I altered my test to include redux provider and store in the render instead of stubbing out the redux hooks.

Silly mistake, hopefully I can save someone the same trouble 😄