npm test is fine, but it also raises the error uncaught at askBackend ReferenceError: localStorage is not defined

问题:

I am now starting to test my reducer in a Reactjs application. I use 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 }; 

Softwares:
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"   } } 

I made my project from create-react-app. Its version is 1.4.3 In my project I had checked with this answer, but I do not understand. Why I still getting this error

Here is my full terminal when run npm test

I think it is false negative alarm. How to get rid of the error messages?

回答1:

Usually your code runs in a browser. So it has access to the localStorage. Your tests are running in a virtual dom (created in plain javascript = jsdom). You can see it in the test script: "react-scripts test --env=jsdom".

When running the tests in a specific testenvironment it doesn't know localStorage.

You can try to mock it in your test files. It could be like this:

// 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'; 

Source: The class-example is from @Dmitriy from an other stackoverflow post.

Hint: You should check for the environment before including the localStorageMock. If not it will also be used when running the code in your browser.

EDIT: Here is a good explanation on how to mock globals in jest. I think its better to import the mock in your test files instead of the utils.js.

文章来源: npm test is fine, but it also raises the error uncaught at askBackend ReferenceError: localStorage is not defined