reactjs - 设置 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};
};

除了 enzyme 部分之外，它还展示了如何初始化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-dom 或 jest-enzyme 导入 jest，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>

我真的没有从这里和其他论坛的质量检查中得到关于我应该如何设置 localStorage 进行测试的信息。

Answer 1

您不需要将 jest 导入到测试文件中。

你应该告诉 eslint 什么 Environment它应该在文件中预期，以便知道存在哪些全局变量。

将其添加到使用 jest 全局变量的任何文件的顶部

/* eslint-env jest */