npm test 很好，但它也会在 askBackend ReferenceError: localStorage is not defined 处引发未捕获的错误

Posted 2023-03-08

【中文标题】npm test 很好，但它也会在 askBackend ReferenceError: localStorage is not defined 处引发未捕获的错误

【英文标题】：npm test is fine, but it also raises the error uncaught at askBackend ReferenceError: localStorage is not defined

【发布时间】：2018-11-18 05:09:19

【问题描述】：

我现在开始在 Reactjs 应用程序中测试我的 reducer。我用localStorage。

utils.js

export const getAuthToken = () => 
  return localStorage.getItem('authToken');
;

export const setAuthToken = (token) => 
  localStorage.setItem('authToken', token);
;

export const removeAuthToken = () => 
  localStorage.removeItem('authToken');
;

export const prepareJWTHeader = (token) => 
  return 'JWT ' + token
;

软件：npm: 5.6.0node: v9.2.0package.json

  "name": "f1",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@amcharts/amcharts3-react": "^3.1.0",
    "ajv": "^6.5.0",
    "amcharts3": "^3.21.12",
    "antd": "^3.6.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.1",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "npm-check-updates": "^2.14.2",
    "react": "^16.4.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0",
    "react-live": "^1.10.1",
    "react-redux": "^5.0.7",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "react-tabs": "^2.2.2",
    "reactstrap": "^6.0.1",
    "recharts": "^1.0.0-beta.10",
    "redux": "^3.7.2",
    "redux-form": "^7.2.3",
    "redux-saga": "^0.16.0",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-react": "^0.80.2"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  

我从create-react-app 制作了我的项目。它的版本是1.4.3 在我的项目中，我检查过这个answer，但我不明白。为什么我仍然收到此错误

这是我运行时的完整终端npm test

PASS  src/App.test.js
  ✓ renders without crashing (4ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.295s, estimated 8s
Ran all test suites.

  console.error node_modules/redux-saga/lib/internal/utils.js:240
    uncaught at askBackend ReferenceError: localStorage is not defined
        at Object.<anonymous>.exports.removeAuthToken (/Users/sarit/study/HT6MInterface/f1/src/utils.js:34:3)
        at Object.<anonymous>.exports.VerifyTokenReducer (/Users/sarit/study/HT6MInterface/f1/src/containers/reducers.js:20:34)
        at combination (/Users/sarit/study/HT6MInterface/f1/node_modules/redux/lib/combineReducers.js:133:29)
        at dispatch (/Users/sarit/study/HT6MInterface/f1/node_modules/redux/lib/createStore.js:178:22)
        at /Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/middleware.js:72:22
        at dispatch (/Users/sarit/study/HT6MInterface/f1/node_modules/redux/lib/applyMiddleware.js:45:18)
        at /Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/utils.js:265:12
        at /Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/proc.js:500:52
        at exec (/Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/scheduler.js:25:5)
        at flush (/Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/scheduler.js:66:5)
        at asap (/Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/scheduler.js:39:5)
        at Array.<anonymous> (/Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/channel.js:197:27)
        at Object.emit (/Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/channel.js:38:13)
        at /Users/sarit/study/HT6MInterface/f1/node_modules/redux-saga/lib/internal/middleware.js:73:21
        at Object.validateToken (/Users/sarit/study/HT6MInterface/f1/node_modules/redux/lib/bindActionCreators.js:7:12)
        at new Container (/Users/sarit/study/HT6MInterface/f1/src/containers/components/Container.js:37:16)
        at constructClassInstance (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:11333:18)
        at updateClassComponent (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:13036:7)
        at beginWork (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:13715:14)
        at performUnitOfWork (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:15741:12)
        at workLoop (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:15780:24)
        at renderRoot (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:15820:7)
        at performWorkOnRoot (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16437:22)
        at performWork (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16358:7)
        at performSyncWork (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16330:3)
        at requestWork (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16230:5)
        at scheduleWork$1 (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16096:11)
        at scheduleRootUpdate (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16663:3)
        at updateContainerAtExpirationTime (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16690:10)
        at updateContainer (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16717:10)
        at ReactRoot.Object.<anonymous>.ReactRoot.render (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:17000:3)
        at /Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:17140:14
        at unbatchedUpdates (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:16557:10)
        at legacyRenderSubtreeIntoContainer (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:17136:5)
        at Object.render (/Users/sarit/study/HT6MInterface/f1/node_modules/react-dom/cjs/react-dom.development.js:17195:12)
        at Object.<anonymous>.it (/Users/sarit/study/HT6MInterface/f1/src/App.test.js:7:22)
        at Object.asyncFn (/Users/sarit/study/HT6MInterface/f1/node_modules/jest-jasmine2/build/jasmine-async.js:68:30)
        at resolve (/Users/sarit/study/HT6MInterface/f1/node_modules/jest-jasmine2/build/queueRunner.js:38:12)
        at new Promise (<anonymous>)
        at mapper (/Users/sarit/study/HT6MInterface/f1/node_modules/jest-jasmine2/build/queueRunner.js:31:21)
        at Promise.resolve.then.el (/Users/sarit/study/HT6MInterface/f1/node_modules/p-map/index.js:46:16)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)

我认为这是误报。如何摆脱错误信息？

【参考方案1】：

通常您的代码在浏览器中运行。所以它可以访问localStorage。您的测试在虚拟 dom 中运行（以纯 javascript = jsdom 创建）。您可以在test 脚本中看到它："react-scripts test --env=jsdom"。

在特定测试环境中运行测试时，它不知道localStorage。

您可以尝试在测试文件中模拟它。可能是这样的：

// In localStorageMock.js
class LocalStorageMock 
  constructor() 
    this.store = 
  

  clear() 
    this.store = 
  

  getItem(key) 
    return this.store[key] || null
  

  setItem(key, value) 
    this.store[key] = value
  

  removeItem(key) 
    delete this.store[key]
  


const localStorageMock = new LocalStorageMock();
export default localStorageMock;

// in utils.js
import localStorage from './localStorageMock';

来源：该类示例来自@Dmitriy，来自另一个*** post。

提示：您应该在包含localStorageMock 之前检查环境。如果不是，它也会在您的浏览器中运行代码时使用。

编辑： Here 很好地解释了如何以开玩笑的方式模拟全局变量。我认为最好在测试文件中导入模拟而不是utils.js。

【讨论】：

我知道 runner 是服务器端的，但我如何告诉 runner 这是Browser 的上下文？总之我如何localStorageMock到项目？

照你说的复制粘贴！非常感谢！

App.test.js 只有'renders without crashing'。我还没有测试任何东西或打电话给localStorage。我同意我应该在TestFile.js 中导入localStorageMock，但我不能:(