Wie man localStorage in JavaScript-Einheitentests verspottet?

Gibt es irgendwelche Bibliotheken da draußen zu verspotten localStorage?

Ich habe verwendet Sinon.JS für die meisten habe ich andere javascript verspottet und fand es echt toll.

Meine ersten Tests zeigen, dass localStorage sich weigert, in Firefox (sadface) zuweisbar zu sein, also brauche ich wahrscheinlich eine Art Hack dafür:/

Meine Optionen ab jetzt (wie ich sehe) sind wie folgt:

1. Erstellen Sie Wrapping-Funktionen, die mein gesamter Code verwendet, und verspotten Sie diese
2. Erstellen Sie eine Art (möglicherweise komplizierte) Zustandsverwaltung (Snapshot von localStorage vor dem Test, bei der Bereinigung, Wiederherstellungs-Snapshot) für localStorage.
3. ??????

Was halten Sie von diesen Ansätzen und glauben Sie, dass es andere bessere Möglichkeiten gibt, dies zu erreichen? In jedem Fall werde ich die resultierende “Bibliothek”, die ich am Ende erstelle, auf Github für Open-Source-Güte stellen.

Hier ist eine einfache Möglichkeit, es mit Jasmine zu verspotten:

let localStore;

beforeEach(() => {
  localStore = {};

  spyOn(window.localStorage, 'getItem').and.callFake((key) =>
    key in localStore ? localStore[key] : null
  );
  spyOn(window.localStorage, 'setItem').and.callFake(
    (key, value) => (localStore[key] = value + '')
  );
  spyOn(window.localStorage, 'clear').and.callFake(() => (localStore = {}));
});

Wenn Sie den lokalen Speicher in all Ihren Tests verspotten möchten, deklarieren Sie die beforeEach() oben gezeigte Funktion im globalen Umfang Ihrer Tests (der übliche Ort ist a specHelper.js Skript).

verspotten Sie einfach den globalen localStorage / sessionStorage (sie haben die gleiche API) für Ihre Bedürfnisse.
Zum Beispiel:

 // Storage Mock
  function storageMock() {
    let storage = {};

    return {
      setItem: function(key, value) {
        storage[key] = value || '';
      },
      getItem: function(key) {
        return key in storage ? storage[key] : null;
      },
      removeItem: function(key) {
        delete storage[key];
      },
      get length() {
        return Object.keys(storage).length;
      },
      key: function(i) {
        const keys = Object.keys(storage);
        return keys[i] || null;
      }
    };
  }

Und was Sie dann tatsächlich tun, ist ungefähr so:

// mock the localStorage
window.localStorage = storageMock();
// mock the sessionStorage
window.sessionStorage = storageMock();

Die aktuellen Lösungen funktionieren nicht in Firefox. Dies liegt daran, dass localStorage von der HTML-Spezifikation als nicht änderbar definiert ist. Sie können dies jedoch umgehen, indem Sie direkt auf den Prototyp von localStorage zugreifen.

Die browserübergreifende Lösung besteht darin, die Objekte zu verspotten Storage.prototype z.B

Anstatt von spyOn(localStorage, ‘setItem’) verwenden

spyOn(Storage.prototype, 'setItem')
spyOn(Storage.prototype, 'getItem')

genommen von bzbarsky und teogeo‘s Antworten hier https://github.com/jasmine/jasmine/issues/299

Ziehen Sie auch die Option in Betracht, Abhängigkeiten in die Konstruktorfunktion eines Objekts einzufügen.

var SomeObject(storage) {
  this.storge = storage || window.localStorage;
  // ...
}

SomeObject.prototype.doSomeStorageRelatedStuff = function() {
  var myValue = this.storage.getItem('myKey');
  // ...
}

// In src
var myObj = new SomeObject();

// In test
var myObj = new SomeObject(mockStorage)

Im Einklang mit Mocking und Unit-Tests vermeide ich gerne das Testen der Speicherimplementierung. Zum Beispiel macht es keinen Sinn zu prüfen, ob sich die Speicherdauer erhöht hat, nachdem Sie ein Element eingestellt haben usw.

Da es offensichtlich unzuverlässig ist, Methoden auf dem echten localStorage-Objekt zu ersetzen, verwenden Sie einen “dummen” mockStorage und stubben Sie die einzelnen Methoden wie gewünscht, wie zum Beispiel:

var mockStorage = {
  setItem: function() {},
  removeItem: function() {},
  key: function() {},
  getItem: function() {},
  removeItem: function() {},
  length: 0
};

// Then in test that needs to know if and how setItem was called
sinon.stub(mockStorage, 'setItem');
var myObj = new SomeObject(mockStorage);

myObj.doSomeStorageRelatedStuff();
expect(mockStorage.setItem).toHaveBeenCalledWith('myKey');

Das ist was ich mache…

var mock = (function() {
  var store = {};
  return {
    getItem: function(key) {
      return store[key];
    },
    setItem: function(key, value) {
      store[key] = value.toString();
    },
    clear: function() {
      store = {};
    }
  };
})();

Object.defineProperty(window, 'localStorage', { 
  value: mock,
});

Gibt es irgendwelche Bibliotheken da draußen zu verspotten localStorage?

Ich habe nur eins geschrieben:

(function () {
    var localStorage = {};
    localStorage.setItem = function (key, val) {
         this[key] = val + '';
    }
    localStorage.getItem = function (key) {
        return this[key];
    }
    Object.defineProperty(localStorage, 'length', {
        get: function () { return Object.keys(this).length - 2; }
    });

    // Your tests here

})();

Meine ersten Tests zeigen, dass localStorage sich weigert, in Firefox zuweisbar zu sein

Nur im globalen Kontext. Mit einer Wrapper-Funktion wie oben funktioniert es einwandfrei.

Überschreiben der localStorage Eigentum des Globalen window Objekt, wie in einigen der Antworten vorgeschlagen, funktioniert in den meisten JS-Engines nicht, da sie deklarieren localStorage data-Eigenschaft als nicht beschreibbar und nicht konfigurierbar.

Ich habe jedoch herausgefunden, dass Sie zumindest mit der WebKit-Version von PhantomJS (Version 1.9.8) die Legacy-API verwenden können __defineGetter__ um zu kontrollieren, was passiert, wenn localStorage zugegriffen wird. Trotzdem wäre es interessant, ob das auch in anderen Browsern funktioniert.

var tmpStorage = window.localStorage;

// replace local storage
window.__defineGetter__('localStorage', function () {
    throw new Error("localStorage not available");
    // you could also return some other object here as a mock
});

// do your tests here    

// restore old getter to actual local storage
window.__defineGetter__('localStorage',
                        function () { return tmpStorage });

Der Vorteil dieses Ansatzes besteht darin, dass Sie den zu testenden Code nicht ändern müssen.