Next.js: Hooks Error: Combining with-redux and with-jest/with-jest-react-testing-library

[oste]

Bug report

Describe the bug

Seeing(when using useDispatch hook):

FAIL tests/index.test.js: Invariant Violation: Could not find react-redux context value; please ensure the component is wrapped in a <Provider>

  17 | const Index = () => {
> 18 |   const dispatch = useDispatch();

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. manually combine the with-redux and (with-jest or with-jest-react-testing-library)
2. add code to use const dispatch = useDispatch(); in page/index.js
3. run yarn test

Expected behavior

The test runs without code error.

System information

• OS: macOS
• Version of Next.js 9

[oste]

It turns out I needed to wrap my component in a Provider just like the error message stated.

Here is an example:

import React from 'react'
import { render } from 'react-testing-library'

import App from '../pages/index.js'

import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'



describe('With React Testing Library', () => {
  const initialState = {output:10}
  const mockStore = configureStore()
  let store,wrapper

  it('Shows "Hello world!"', () => {
    store = mockStore(initialState)
    const { getByText } = render(<Provider store={store}><App /></Provider>)

    expect(getByText('Hello Worldd!')).not.toBeNull()
  })
})