测试反应应用程序时收到错误消息答案

【问题标题】：Getting an error message while testing react app测试反应应用程序时收到错误消息
【发布时间】：2021-12-13 16:39:32
【问题描述】：

我在我的 mern 应用程序中测试一项测试时收到此错误消息。我使用 redux 来管理应用程序的状态。我对测试反应应用程序非常陌生。任何人都请帮我解决这个问题。

错误信息： could not find react-redux context value; please ensure the component is wrapped in a <Provider>

标题组件：

import React, { useState } from "react";
import { useSelector } from "react-redux";
import iconPlus from "../../assets/images/icon-plus.svg";
import Dropdown from "./Dropdown";
import Modal from "../utils/Modal";

const Header = ({ openForm, setOpenForm }) => {
  const [showModal, setShowModal] = useState(false);
  const invoices = useSelector((state) => state.invoices);
  const user = JSON.parse(localStorage.getItem("profile"));

  const handleClick = () => {
    if (user?.result?.name) {
      setOpenForm(!openForm);
    } else {
      setShowModal(true);
    }
  };

  return (
    <>
      <div className="col-start-2 col-end-3 flex justify-between items-center w-full mb-14">
        <h1 className="text-white text-3xl font-bold">
          Invoices
          <p className="text-xs font-extralight tracking-wide text-neutral">{`There are ${invoices.length} total invoices.`}</p>
        </h1>
        <div className="flex relative">
          <Dropdown />
          <button
            className="text-white text-xs font-semibold flex bg-secondaryTwo hover:bg-purple-500 transition px-2 py-2 pr-4 ml-4 rounded-full items-center"
            onClick={() => handleClick()}
          >
            <div className="rounded-full h-8 w-8 flex items-center justify-center bg-white mr-2">
              <img src={iconPlus} alt="add new invoice" />
            </div>
            New Invoice
          </button>
        </div>
      </div>
      {showModal && <Modal setShowModal={setShowModal} />}
    </>
  );
};

export default Header;

Header.test.js 代码：

import { render, screen } from "@testing-library/react";
import Header from "../Header";

const mockedSetOpenForm = jest.fn();

test("should render number of invoices", () => {
  render(<Header openForm={false} setOpenForm={mockedSetOpenForm} />);
  const paragraphElement = screen.getByText(/There are 5 total invoices./i);
  expect(paragraphElement).toBeInTheDocument();
});

【问题讨论】：

因为错误消息告诉您，您没有在 useSelector 可以工作的上下文中呈现标题，请阅读例如redux.js.org/usage/writing-tests.

标签： reactjs react-redux jestjs react-testing-library

【解决方案1】：

您可以使用 redux-mock-store 模拟您的 redux 存储，然后将您的组件包装在 Provider 中：

    import { render, screen } from "@testing-library/react";
    import { Provider } from 'react-redux';
    import configureMockStore from 'redux-mock-store';
    import Header from "../Header";
    
    const mockedSetOpenForm = jest.fn();

    const mockStore = configureMockStore();
    const store = mockStore({ /* appropriate store content */ });
    
    test("should render number of invoices", () => {
      render(
        <Provider store={store}>
          <Header openForm={false} setOpenForm={mockedSetOpenForm} /> 
        </Provider>
      );

      const paragraphElement = screen.getByText(/There are 5 total invoices./i);
      expect(paragraphElement).toBeInTheDocument();
    });

【讨论】：