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，ESLinter将在jest.fn()中显示一个错误，提示未定义玩笑。导入并运行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

您无需将笑话导入到测试文件中。

您应该告诉eslint文件中应该有Environment个什么，以便知道存在什么全局变量。

将此添加到使用jest globals的所有文件的顶部

/* eslint-env jest */

Answer 2

我真的不知道到底发生了什么，一些与开玩笑，jet-dom，开玩笑的酶有关的软件包发生了冲突。但在删除package-lock.json，yarn.lock，node_modules，从package.json中的依赖项中删除了玩笑之后，然后进行npm install和yarn install，我设法使其正常工作！

设置localStorage来测试React应用

2 个答案: