我想测试组件中的按钮，但收到错误“无法从‘src/redux/store/index.js’中找到模块‘redux-persist-transform-encrypt’”

Question

我已经使用 redux 创建了 React 应用程序，我想从 KanbanBoard.jsx 测试我的按钮

这是 KanbanBoard.jsx 的代码

 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { useState } from "react";
import Card from "../Card/Card";
import { fetchData } from "../../redux/actions";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

const KanbanBoard = () => {
  const dispatch = useDispatch();
  const [url, setUrl] = useState("");

  const data = useSelector((state) => state.reducer.data);

  const onDragEnd = (result) => {
    if (!result.destination) return;
    const { source, destination } = result;

    if (source.droppableId !== destination.droppableId) {
      const sourceColIndex = data.findIndex((e) => e.id === source.droppableId);
      const destinationColIndex = data.findIndex(
        (e) => e.id === destination.droppableId
      );

      const sourceCol = data[sourceColIndex];
      const destinationCol = data[destinationColIndex];

      const sourceTask = [...sourceCol.tasks];
      const destinationTask = [...destinationCol.tasks];

      const [movedTask] = sourceTask.splice(source.index, 1);
      movedTask.position = destination.droppableId;

      destinationTask.splice(destination.index, 0, movedTask);

      data[sourceColIndex].tasks = sourceTask;
      data[destinationColIndex].tasks = destinationTask;
    }
  };

  const cleanedUrl = url
    .replace("https://github.com/", "")
    .replace("/issues", "");
  const [owner, repo] = cleanedUrl.split("/");
  console.log(owner);
  console.log(repo);

  return (
    <div>
      <div>
        <div
          className="d-flex justify-content-around align-items-center"
          style={{ width: "90%", marginInline: "auto" }}
        >
          <Form style={{ width: "80%" }}>
            <Form.Group className="mb-3" controlId="formBasicEmail">
              <Form.Control
                style={{
                  marginTop: "17px",
                  borderRadius: "0px",
                  border: "1px black solid",
                }}
                type="email"
                placeholder="Enter REPO url"
                value={url}
                onChange={(e) => setUrl(e.target.value)}
              />
            </Form.Group>
          </Form>
          <Button
            variant="dark"
            type="button"
            style={{
              backgroundColor: "transparent",
              borderRadius: "0px",
              color: "black",
            }}
            onClick={(event) => {
              event.preventDefault();
              dispatch(fetchData(url));
              console.log("clicked");
            }}
          >
            Load issues
          </Button>
        </div>
        <div style={{ width: "85%", marginInline: "auto" }}>
          {owner && repo ? (
            <>
              <a
                href={`https://github.com/${owner}`}
                target="_blank"
                rel="noreferrer"
              >
                {owner}
              </a>
              <span> {">"} </span>
              <a href={url} target="_blank" rel="noreferrer">
                {repo}
              </a>
            </>
          ) : null}
        </div>
      </div>
      <DragDropContext onDragEnd={onDragEnd}>
        <div className="kanban justify-content-center mt-5">
          {data.map((section) => (
            <Droppable key={section.id} droppableId={section.id}>
              {(provided) => (
                <div
                  {...provided.droppableProps}
                  className="kanban__section"
                  ref={provided.innerRef}
                >
                  <div className="kanban__section__title">{section.title}</div>
                  <div className="kanban__section__content">
                    {section.tasks.map((task, index) => (
                      <Draggable
                        key={task.id}
                        draggableId={task.id}
                        index={index}
                      >
                        {(provided, snapshot) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            style={{
                              ...provided.draggableProps.style,
                              opacity: snapshot.isDragging ? "0.5" : "1",
                            }}
                          >
                            <Card key={task.id} updates={task.updates}>
                              {task.title}
                            </Card>
                          </div>
                        )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                  </div>
                </div>
              )}
            </Droppable>
          ))}
        </div>
      </DragDropContext>
    </div>
  );
};
export default KanbanBoard;

这是我的商店文件：

 import {
  configureStore,
  combineReducers,
  getDefaultMiddleware,
} from "@reduxjs/toolkit";
import localStorage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import { encryptTransform } from "redux-persist-transform-encrypt";
import reducer from "../reducers/reducer";

const persistConfig = {
  key: "root",
  storage: localStorage,
  transforms: [
    encryptTransform({
      secretKey: process.env.REACT_APP_SECRET_KEY,
    }),
  ],
};

const bigReducer = combineReducers({
  reducer: reducer,
});

const persistedReducer = persistReducer(persistConfig, bigReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

这是我的测试文件，它与 KanbanBoard 放在同一文件夹中：

import { render, screen } from "@testing-library/react";
import KanbanBoard from "../KanbanBoard";
import { Button } from "react-bootstrap";
import { Provider } from "react-redux";
import { store } from "../../../redux/store/index.js";

test("renders Load issues button", async () => {
  render(
    <Provider store={store}>
      <KanbanBoard />
    </Provider>
  );
  const btnElement = await screen.findByRole("button", {
    name: /Load issues/i,
  });
  expect(btnElement).toBeInTheDocument();
});

每次我尝试运行测试时，都会收到此错误：

  ● Test suite failed to run

    Cannot find module 'redux-persist-transform-encrypt' from 'src/redux/store/index.js'

    Require stack:
      src/redux/store/index.js
      src/components/KanbanBoard/__test__/KanbanBoard.test.js

       6 | import localStorage from "redux-persist/lib/storage";
       7 | import { persistReducer, persistStore } from "redux-persist";
    >  8 | import { encryptTransform } from "redux-persist-transform-encrypt";        
         | ^
       9 | import reducer from "../reducers/reducer";
      10 |
      11 | const persistConfig = {

我尝试重新安装 redux-persist-transform-encrypt 包，node_modules，但没有帮助。 我也分享我的package.json：

{
  "name": "kanban-board",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/user-event": "^13.5.0",
    "ant": "^0.2.0",
    "axios": "^1.3.5",
    "bootstrap": "^5.2.3",
    "cors-anywhere": "^0.4.4",
    "http-proxy-middleware": "^2.0.6",
    "octokit": "^2.0.14",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-bootstrap": "^2.7.3",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-scripts": "5.0.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-persist": "^6.0.0",
    "redux-persist-transform-encrypt": "^5.0.0",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/react": "^14.0.0"
  }
}

为什么我在尝试运行测试时收到此错误，以及如何修复它？

Answer 1

我也遇到同样的问题，请问你是怎么解决的？ 我找不到任何东西。