Не удается получить тест basi c для работы в реагирующих на тестирование утилит с редуксом

Question

Я не могу получить базовый c тест, работающий сact-test-utils и Redux, как показано ниже.

import React from 'react'
import { Provider } from 'react-redux'
import { combineReducers } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import { render } from '@testing-library/react'

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

    console.log(store)

    const { getByText } = render(
        <Provider store={store}>
            <h1>hi</h1>
        </Provider>
    )
    expect(getByText('hi')).toBeInTheDocument()
})

он терпит неудачу с этой ошибкой

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

      14 |      console.log(store)
      15 | 
    > 16 |      const { getByText } = render(
         |                            ^
      17 |              <Provider store={store}>
      18 |                      <h1>hi</h1>
      19 |              </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)
...

Но если закомментировать <Provider>, как показано ниже, тогда тест пройден

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

    console.log(store)

    const { getByText } = render(
        // <Provider store={store}>
            <h1>hi</h1>
        // </Provider>
    )
    expect(getByText('hi')).toBeInTheDocument()
})

Answer 1

Вы можете проверить наличие следующих зависимостей, иногда вам нужно удалить и установить их как разработку, как в случае с реакцией на домен.

yarn add react-dom  // or npm i react-dom
yarn add redux
yarn add react-test-renderer
yarn remove react-dom
yarn add react-dom -D
yarn remove react-redux
yarn add react-redux
yarn add @reduxjs/toolkit

Ваш код работает на моей машине без проблем

@ Райан согласно вашему запросу здесь - test.test. js код:

import React from 'react'
import { Provider } from 'react-redux'
import { combineReducers, createStore } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import { render } from '@testing-library/react'

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

    console.log(store)

    const { getByText } = render(
        <Provider store={store}>
            <h1>hi</h1>
        </Provider>
    )
    expect(getByText('hi')).toBeInTheDocument()
})

Answer 2

Вы можете указать Provider в качестве оболочки для метода рендеринга из библиотеки реагирующего тестирования

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

    console.log(store)
    const Wrapper = ({children}) => {
         return <Provider store={store}>{children}</Provider>
    }
    const { getByText } = render(
         <h1>hi</h1>, 
         {wrapper: Wrapper}
    )
    expect(getByText('hi')).toBeInTheDocument()
})

Вы также можете переопределить метод рендеринга библиотеки тестирования, чтобы сделать логи Wrapper c Generi c как упоминается в документации

// test-utils.js
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { initialState as reducerInitialState, reducer } from './reducer'

function render(
  ui,
  {
    initialState = reducerInitialState,
    store = createStore(reducer, initialState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

// re-export everything
export * from '@testing-library/react'

// override render method
export { render }

и используется как

// counter.test.js
import React from 'react'
import { createStore } from 'redux'
// We're using our own custom render function and not RTL's render
// our custom utils also re-export everything from RTL
// so we can import fireEvent and screen here as well
import { render, fireEvent, screen } from './test-utils'
import '@testing-library/jest-dom/extend-expect'

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

    const { getByText } = render(
            <h1>hi</h1>,
         {store}
    )
    expect(getByText('hi')).toBeInTheDocument()
})