设置 localStorage 以使用 jest 测试 React 应用程序

Question

我创建了一个空的应用程序create-react-app。它在 pckage.json 和示例 App.test.js 中提供了一个测试脚本。第一步，我想根据create-react-app的文档设置测试环境。在我的应用程序中，我将使用 localStorage。让我们说一个像下面这样的动作要测试

export const cancel = () => {
  localStorage.removeItem("MyAppData");
  return { type: types.USER_CANCEL};
};

除了酶部分，它显示了如何初始化localStorage. 所以我最终得到了一个setupTests.js文件

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
// react-testing-library renders your components to document.body,
// this will ensure they're removed after each test.
import "react-testing-library/cleanup-after-each";
// this adds jest-dom's custom assertions
import "jest-dom/extend-expect";

configure({ adapter: new Adapter() });

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;

在这里，如果我不jest从 jest 或 jest-dom 或 jest-enzyme导入，ESLinter 会显示jest.fn()未定义 jest的错误。当我导入并运行时，yarn test我得到

$ react-scripts test --env=jsdom
 FAIL  src\App.test.js
  ? Test suite failed to run

    TypeError: _jest2.default.fn is not a function

      at Object.<anonymous> (src/setupTests.js:15:27)
          at <anonymous>

我真的没有从这里和其他论坛的 QA 那里得到我应该如何设置 localStorage 进行测试。

Answer 1

我真的不知道到底发生了什么，一些与 jest、jet-dom、jest-enzyme 相关的软件包发生了冲突。但我在删除 package-lock.json、yarn.lock、node_modules、从 package.json 中的依赖项中删除 jest，然后执行 npm install 和yarn install 后设法使其工作！