程序员经验分享-hwhale

npm 测试没问题，但它也引发了 AskBackend ReferenceError 中未捕获的错误：localStorage 未定义

2023-12-27

我现在开始在 Reactjs 应用程序中测试我的减速器。我用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.0
node: v9.2.0
package.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 https://stackoverflow.com/questions/46072312/referenceerror-localstorage-is-not-defined， 但是我不理解。为什么我仍然收到此错误

这是我运行时的完整终端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)

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


通常您的代码在浏览器中运行。所以它可以访问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堆栈溢出帖子 https://stackoverflow.com/questions/32911630/how-do-i-deal-with-localstorage-in-jest-tests.

Hint:您应该在添加之前检查环境localStorageMock。如果没有，在浏览器中运行代码时也会使用它。

EDIT: Here https://stackoverflow.com/questions/40449434/mocking-globals-in-jest很好地解释了如何开玩笑地模拟全局变量。我认为最好在测试文件中导入模拟而不是utils.js.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jestjs

createreactapp

npm 测试没问题，但它也引发了 AskBackend ReferenceError 中未捕获的错误：localStorage 未定义 的相关文章

  • 如何检测 React 组件与 React 元素？

    React isValidElement对于 React 组件和 React 元素都测试为 true 具体来说 我如何测试一个对象是一个 React 组件 目前 我正在通过测试来做到这一点typeof obj type function 但

  • 在占位符中添加 HTML

    我喜欢使用 HTML 占位符 因为它有助于向用户描述他们需要输入的内容类型 但是 有时您需要为用户提供更多信息 而不仅仅是简单的句子 基本上我希望能够在我的文本区域占位符中添加换行符 制表符等 我听说过使用特殊编码来做到这一点 并且已经使用

  • 在原子操作中测试和递减？

    我刚刚发现了一个恼人的错误 它基本上是一个竞争条件 为了便于论证 我们假设一个非常简单的文档结构 例如 id XXX amount 100 集合中存在数百个这样的文档 并且由多个编写器访问 这些编写器有效地尝试将数量降低任何值 但绝不会低于

  • 如何使用 WebStorm 在 TypeScript 而不是 JavaScript 中创建 Cucumber 步骤定义文件？

    I m building a new e2e test suite using Cucumber js and I d like to use TypeScript for my step files When I create a new

  • 超出 Google 电子表格上的 ImportXML 限制

    我现在陷入了 抓取问题 特别是我想将作者的姓名从网页提取到谷歌电子表格 其实功能 IMPORTXML A2 span class author vcard meta item 正在工作 但是当我增加了要抓取的链接数量后 它就开始无限加载 所

  • 解构为两个单独的变量

    有没有一种快速的方法来解构一个对象 以便将其存储到两个不同的组中 例如 const obj a 1 b 2 c 3 d 4 e 5 const a b obj store the rest of the properties that we

  • 发送电子邮件的 Google Apps 脚本语法错误。无法识别我的问题

    我正在尝试让 Google 工作表从工作簿中另一张工作表的长列表中发送个性化电子邮件 我使用了教程 因为我是所有编码语言的认证新手 但 AppScript 告诉我第 4 行有语法错误 我一生都无法弄清楚我做错了什么 但我确信当由具有这些合法

  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个

  • 加载新的 Turbo Frame 时如何执行 JavaScript

    我在 Rails 应用程序中使用 Turbo Frames 并且在每个页面上都有

  • javascript获取网页中选定文本的段落

    突出显示文本后 我想获取所选文本所在的段落 var select window content document getSelection 请问有什么指点吗 这实际上很难做到 因为你必须考虑六种情况 所选内容不在一个段落内 简单 整个选择都

  • 如何使用 jQuery 通过单击按钮来选择下拉列表中的所有值？

    如何通过在 JavaScript 中使用 jQuery 单击按钮来选择下拉列表中的所有值 function select children option attr selected selected 应该做 当然你需要一个SELECT具有属

  • 将压缩的json数据存储在本地存储中

    我想将 JSON 数据存储在本地存储中 有时存储的数据可能超过 5MB 每个域的浏览器允许的最大阈值 无论如何 我可以压缩或压缩数据并将其存储在本地存储中吗 如果对大数据进行每个 JS 函数的压缩和解压 会增加多少延迟 我正在使用这个 js

  • 在 WordPress 和 woocommerce 中禁用 zxcvbn.min.js

    如您所知 zxcvbn min js 约为 400kb 并且默认在 WordPress 网站中加载 我想知道如何阻止加载此 JavaScript 库 因为我不想在我的网站中检查密码长度 将以下内容添加到主题的 function php 或自

  • 变量值的 swap() 函数[重复]

    这个问题在这里已经有答案了 我无法达到下面这个交换函数的预期结果 我希望将值打印为 3 2 function swap x y var t x x y y t console log swap 2 3 任何线索将不胜感激 您的函数正在内部交

  • JavaScript 匿名函数语法

    下面两个块有什么区别 block 1 console log anonymous block block 2 function anon console log anonymous block 2 我在 Netbeans 中运行了这个 使用

  • “WebSocket 在连接建立之前已关闭”是什么意思？

    我正在使用 JavaScript 和联盟平台 http www unionplatform com我该如何诊断这个问题 非常感谢 如果你去http jsbin com ekusep 6 edit http jsbin com ekusep

  • 在窗口调整大小和窗口加载时动态调整 pixi 舞台及其内容的大小

    我正在尝试在窗口调整大小时动态调整 pixi 舞台 画布和内容 的大小 并且最初以浏览器窗口的大小加载 而不改变比例 我使用以下内容将初始大小基本上设置为window innerWidth window innerHeight 但它做了一些

  • 使用js获取选择选项的onclick事件

    我有一个非常令人沮丧的问题 我有这个代码 它过滤掉我的结果并将它们输入到选择框中 var syn

  • CSS交付优化：如何推迟CSS加载？

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers

  • 如何在不刷新页面的情况下更新页面 html 和 url

    我想知道是否有人可以指出我学习如何在不刷新页面的情况下更新页面 html 和 url 的方向 是否有任何现有的 javascript 库可以处理这个问题 或者有一本涵盖此类事情的好书 这是使用该效果的示例网站 http onedesignc

随机推荐

热门标签