Тест npm - это хорошо, но он также выдает ошибку uncaught в askBackend ReferenceError: localStorage не определен

Question

Я сейчас начинаю тестировать мой редуктор в приложении 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 В моем проекте я проверил с этим ответом , но я не понимаю.Почему я все еще получаю эту ошибку

Вот мой полный терминал при запуске 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)

Я думаю, что это ложноотрицательный сигнал тревоги.Как избавиться от сообщений об ошибках?

Answer 1

Обычно ваш код запускается в браузере.Так что у него есть доступ к localStorage.Ваши тесты выполняются в виртуальном домене (создан на простом 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 из другого сообщения о стеке .

Подсказка: Перед включением localStorageMock необходимо проверить состояние окружающей среды.Если нет, то он также будет использоваться при запуске кода в вашем браузере.

РЕДАКТИРОВАТЬ: Здесь - хорошее объяснение того, как высмеивать глобалы в шутке.Я думаю, что лучше импортировать макет в ваших тестовых файлах вместо utils.js.