reactjs - 当我使用 useSelector 时，React 测试库无法工作

Question

我有一个 Redux 组件 useSelector , 当我想测试渲染文本时，它在 useSelector 上显示错误消息并显示错误消息:could not find react-redux context value; please ensure the component is wrapped in a <Provider> .我已经把<Provider>到顶级组件，我的测试代码的错误部分在哪里？应用程序本身运行正常。
顶层组件:

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { Provider } from "react-redux"
import store from "./redux/store"

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("test")
)

应用程序.js

import { useEffect, useState, useCallback } from "react"
import { useDispatch, useSelector } from "react-redux"
import { fetchPosts, showName } from "./redux/actions/posts"
import Main from "./component/main"

function App() {
    const { posts, name } = useSelector((state) => state.posts)
    const dispatch = useDispatch()

    const handleClick = useCallback(() => {
        dispatch(fetchPosts())
    }, [])

    const handleShowName = useCallback((textName) => {
        dispatch(showName(textName))
    }, [])

    return (
        <div className="App" data-test="appComponent">
            <button onClick={handleClick}>get post</button>
            <button onClick={() => handleShowName("test")}>Show name</button>
            <section className="main">
                <div>project name: {name}</div>
                <Main posts={posts} />
            </section>
        </div>
    )
}

export default App

app.test.js

import React from "react"
import App from "./App"
import { render, fireEvent, screen } from "@testing-library/react"

it("render a div with text 'project name'", () => {
    const { container, getByText } = render(<App />)
    expect(getByText("project name:")).toBeInTheDocument()
})

当我测试我的 redux action 和 redux reducer 时，我的测试工作正常。所以Jest设置应该没问题。
Jest 配置文件

module.exports = {
    setupFilesAfterEnv: ["./setupTests.js"]
}

设置测试.js

import '@testing-library/jest-dom/extend-expect';

babel.config.js

module.exports = {
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: [
        ["@babel/plugin-proposal-class-properties", { loose: false }],
        [
            "@babel/plugin-transform-runtime",
            {
                corejs: 3,
                helpers: true,
                regenerator: true
            }
        ]
    ]
}

Answer 1

您需要为正在测试的组件(单独)提供一个 redux 上下文。
最低限度是创建一个简单的wrapper component (另见 custom render )，类似于应用中的提供者，传入了 render 的选项测试实用程序。

import { Provider } from "react-redux"
import store from "./redux/store"

const ReduxWrapper = ({ children }) => (
  <Provider store={store}>
    {children}
  </Provider>
);

it("render a div with text 'project name'", () => {
  const { container, getByText } = render(
    <App />,
    { wrapper: ReduxWrapper },
  );
  expect(getByText("project name:")).toBeInTheDocument()
});

请参阅 Redux 文档进行测试 connected components .
要点是创建一个包含您的 redux 存储的自定义渲染函数。

import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
// Import your own reducer
import store from "./redux/store";

function render(
  ui,
  {
    initialState,
    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 };

然后为了测试你导入自定义 render公用事业

import { render, fireEvent, screen } from "../testUtils";

it("render a div with text 'project name'", () => {
  const { container, getByText } = render(
    <App />,
    // pass any options here like initial state, custom store, etc...
  );
  expect(getByText("project name:")).toBeInTheDocument();
});