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
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)
I think it is false negative alarm. How to get rid of the error messages?
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.