文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >npm测试很好，但它也会在askBackend ReferenceError: localStorage未定义时引起错误。

问npm测试很好，但它也会在askBackend ReferenceError: localStorage未定义时引起错误。
EN

Stack Overflow用户
提问于 2018-06-08 07:30:22
回答 1查看 300关注 0票数 2

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

utils.js

代码语言：javascript
复制
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.0

node: v9.2.0

package.json

代码语言：javascript
复制
{
  "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时的完整终端

代码语言：javascript
复制
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)

我认为这是错误的负面警报。如何消除错误信息？

javascript
jestjs
create-react-app
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-08 08:50:14

通常您的代码在浏览器中运行。因此，它可以访问localStorage。您的测试运行在虚拟区域(在普通javascript =jsdom中创建)。您可以在test脚本："react-scripts test --env=jsdom"中看到它。

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

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

代码语言：javascript
复制
// 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';

来源:类示例来自另一个https://stackoverflow.com/questions/32911630/how-do-i-deal-with-localstorage-in-jest-tests的@Dmitriy。

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

编辑： Here是关于如何在开玩笑中模拟全局的一个很好的解释。我认为最好在测试文件中导入模拟，而不是导入utils.js。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50755559

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档