Reactjs Can'；使用redux进行反应测试时，无法使用基本测试

我无法获得使用react test utils和Redux的基本测试，如下所示

从“React”导入React
从“react redux”导入{Provider}
从“redux”导入{combinereducer}
从“@reduxjs/toolkit”导入{configureStore}
从'@testing library/react'导入{render}
它（'呈现欢迎信息'，（）=>{
常量存储=配置存储({
减速器：组合减速器（{}），
})
console.log（存储）
常量{getByText}=render(
你好
)
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（…）：渲染未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null。
14 |控制台日志（存储）
15 | 
>16 | const{getByText}=render(
|                            ^
17 |              
18 |你好
19 |              
在ReconcileChildfiers（node_modules/react dom/cjs/react dom.development.js:14348:23）
在reconcileChildren（node_modules/react dom/cjs/react dom.development.js:16762:28）
在mountIndeterminateComponent（node_modules/react dom/cjs/react dom.development.js:17542:5）
开始工作时（node_modules/react-dom/cjs/react-dom.development.js:18596:16）
在htmlunknowneelement.callCallback（node_modules/react dom/cjs/react dom.development.js:188:14）
...

但如果注释掉如下所示的

，则测试通过

it（'呈现欢迎信息'，（）=>{
常量存储=配置存储({
减速器：组合减速器（{}），
})
console.log（存储）
常量{getByText}=render(
// 
你好
// 
)
expect（getByText（'hi'））.toBeInTheDocument（）
})

您可以将提供者指定为从react测试库呈现方法的包装器

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()
})

it（'呈现欢迎信息'，（）=>{
常量存储=配置存储({
减速器：组合减速器（{}），
})
console.log（存储）
常量包装器=（{children}）=>{
返回{children}
}
常量{getByText}=render(
你好
{wrapper:wrapper}
)
expect（getByText（'hi'））.toBeInTheDocument（）
})

您还可以重写测试库的render方法，使包装器逻辑成为通用的，如

//test-utils.js
从“React”导入React
从'@testing library/react'导入{render as rtlRender}
从“redux”导入{createStore}
从“react redux”导入{Provider}
从“./reducer”导入{initialState作为reducerInitialState，reducer}
函数渲染(
ui，
{
初始状态=还原初始状态，
store=createStore（减速器，初始状态），
…渲染
} = {}
) {
函数包装器（{children}）{
返回{children}
}
返回rtlRender（ui，{wrapper:wrapper，…renderOptions}）
}
//转口一切
从“@testing library/react”导出*
//覆盖渲染方法
导出{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()
})

//counter.test.js
从“React”导入React
从“redux”导入{createStore}
//我们使用自己的自定义渲染函数，而不是RTL的渲染
//我们的定制UTIL还从RTL转口所有产品
//所以我们也可以在这里导入fireEvent和screen
从“/test utils”导入{render，firevent，screen}
导入“@testing library/jest dom/extend expect”
它（'呈现欢迎信息'，（）=>{
常量存储=配置存储({
减速器：组合减速器（{}），
})
常量{getByText}=render(
你好
{store}
)
expect（getByText（'hi'））.toBeInTheDocument（）
})
< /代码> 您可以考虑检查下面的依赖关系，有时您需要卸载并安装为开发，比如DOM CASE。

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

你的代码在我的机器上运行没有问题


@Ryan根据您的请求，这里是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()
})

从“React”导入React
从“react redux”导入{Provider}
从“redux”导入{combinereducer，createStore}
从“@reduxjs/toolkit”导入{configureStore}
从'@testing library/react'导入{render}
它（'呈现欢迎信息'，（）=>{
常量存储=配置存储({
减速器：组合减速器（{}），
})
console.log（存储）
常量{getByText}=render(
你好
)
expect（getByText（'hi'））.toBeInTheDocument（）
})
可以提供同一测试的代码框链接吗？@ MuksHSONI我不能在代码沙箱中复制它。这是一个样板回购。我可以在一个分支中共享吗？它很容易运行代码。你可以考虑嘲笑你的商店。你可以只考虑TE下的组件只提供你的商店需要的部分。t、 非常好。谢谢@Flo，但我不想嘲笑商店。请让我知道上述解决方案是否解决了您的问题。这会产生相同的错误。谢谢您的帮助，但看起来您的建议只是以不同的方式包装。谢谢@Feras，我尝试重新安装这些包，但在我的盒子上仍然不起作用。您可以发布c吗你运行的测试的ode？我没有看到
test.test.js
文件？我在repo中没有看到
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()
})