localStorage is not defined 1.1.8

[a-vilmin]

Hey I'm using mock-local-storage for testing with mocha through the Vue CLI 3 and am getting undefined localStorage issues. I added the --require jsdom-global --require mock-local-storage lines to the vue-cli-service test:unit command in package.json, yet I can't access the localStorage object in my tests. Not sure if I'm missing something here.

[greenpdx]

Me too I then tried to import 'mock-local-storage', still nothing when I printed out window, sessionStorage is empty Object.

I changed sessionStorage to localStorage and now I am have other errors, but I need session Storage.
More later

[stas-kh]

Same problem here, guys. Unfortunately, no solution found yet.

[HermitSun]

Maybe you can mock a localStorage by yourself.....sorry for my poor English. But as vue-test-utils' doc says, 'Note the tests are run inside Node.js with browser environment simulated with JSDOM.', we can mount a mocked localStorage on global. In fact, JSDOM is based on a mocked global. I succeeded with the following code, and I hope this can help you:

// localStorage.js
global.localStorage = {
    data: {},
    getItem(key) {
        return this.data[key];
    },
    setItem(key, value) {
        this.data[key] = value;
    },
    removeItem(key) {
        delete this.data[key];
    }
};
// Test.spec.js
import "./localStorage";
// ...do more

And it works. It can also work when using TypeScript.

[andrefox333]

@HermitSun Thank you :)

[axelpale]

I had to adjust the nice snippet by @HermitSun to get it working properly. For example, the real localStorage.getItem returns null if the item is not found where the snippet's getItem returns undefined. Also I had to define the window object and correct code style to fit my environment (Node v10, StandardJS, and Tape tests). See the improved version below:

// mock-local-storage.js
global.window = {}

global.window.localStorage = {
  data: {},
  getItem: function (key) {
    const val = this.data[key]
    if (val) {
      return val
    }
    return null
  },
  setItem: function (key, value) {
    this.data[key] = value
  },
  removeItem: function (key) {
    delete this.data[key]
  }
}
// in the beginning of test.js
require('./mock-local-storage')

[jensengbg-christian-mosciatti]

I'm new in testing and I was wondering how to access localStorage using Vue test utils. After reading the answers here I found I was able to use localStorage just by adding global in front, instead of window, without mocking it. Am I doing wrong?

[Arrow66]

hey guys I was having the same problem . i just did this and made it to work on .mocharc.json

`"require":["@babel/register","ignore-styles","mock-local-storage","jsdom-global/register"]`

just import mock-local-storage before jsdom

[nikolay-turpitko]

I had to adjust the nice snippet by @HermitSun to get it working properly. For example, the real localStorage.getItem returns null if the item is not found where the snippet's getItem returns undefined. Also I had to define the window object and correct code style to fit my environment (Node v10, StandardJS, and Tape tests). See the improved version below:

// mock-local-storage.js
global.window = {}

global.window.localStorage = {
  data: {},
  getItem: function (key) {
    const val = this.data[key]
    if (val) {
      return val
    }
    return null
  },
  setItem: function (key, value) {
    this.data[key] = value
  },
  removeItem: function (key) {
    delete this.data[key]
  }
}
// in the beginning of test.js
require('./mock-local-storage')

Yeah, this project started from something like this. See original stackoverflow topic for some other nuances.

Initial idea was just to wrap this code into npm package to avoid reinventing the wheel and to have it collectively tested and fixed.

As I said in README, we (github project creators) don't use this code ourselves currently and have no time to invest into it. I occasionally merge incoming PRs and let Travis to build and deploy package. So, if someone want to see issues fixed, you are welcome to fork, fix, change docs etc and send a PR. Of course, you can always fork it and maintain a better version of it.

Also, if you were able to solve some issue with some config / workaround, please don't hesitate to put it into README page for others to find it quickly. Just send me a PR and I'll merge it. @Arrow66, if you think you comment deserve to be put on the front page, please edit it. Put it under the "Mocha" header or add "Troubleshooting" sub header or something.

Please also signal me if issue can be closed.

Thanks!