Como simular localStorage em testes de unidade de JavaScript?

Existe alguma biblioteca para zombar localStorage?

Tenho usado o Sinon.JS para a maioria das minhas outras simulações de javascript e descobri que é realmente ótimo.

Meu teste inicial mostra que localStorage se recusa a ser atribuível no firefox (sadface), então provavelmente vou precisar de algum tipo de hack em torno disso: /

Minhas opções a partir de agora (como vejo) são as seguintes:

1. Criar funções de empacotamento que todo meu código usa e simular aquelas
2. Crie algum tipo de (pode ser complicado) gerenciamento de estado (instantâneo localStorage antes do teste, no instantâneo de restauração de limpeza) para localStorage.
3. ??????

O que você acha dessas abordagens e acha que há outras maneiras melhores de fazer isso? De qualquer forma, colocarei a "biblioteca" resultante que acabo criando no github para as vantagens do código aberto.

Aqui está uma maneira simples de zombar com Jasmine:

beforeEach(function () {
  var store = {};

  spyOn(localStorage, 'getItem').andCallFake(function (key) {
    return store[key];
  });
  spyOn(localStorage, 'setItem').andCallFake(function (key, value) {
    return store[key] = value + '';
  });
  spyOn(localStorage, 'clear').andCallFake(function () {
      store = {};
  });
});

Se você quiser simular o armazenamento local em todos os seus testes, declare a beforeEach()função mostrada acima no escopo global de seus testes (o local usual é um script specHelper.js ).

apenas simule o localStorage / sessionStorage global (eles têm a mesma API) para suas necessidades.
Por exemplo:

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

E então o que você realmente faz é algo assim:

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

Considere também a opção de injetar dependências na função construtora de um objeto.

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)

Em linha com a simulação e o teste de unidade, gosto de evitar testar a implementação do armazenamento. Por exemplo, não adianta verificar se o comprimento de armazenamento aumentou depois de definir um item, etc.

Visto que obviamente não é confiável substituir métodos no objeto localStorage real, use um mockStorage "burro" e faça stub dos métodos individuais conforme desejado, como:

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

Isto é o que eu faço...

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,
});

As soluções atuais não funcionarão no Firefox. Isso ocorre porque localStorage é definido pela especificação html como não sendo modificável. No entanto, você pode contornar isso acessando o protótipo de localStorage diretamente.

A solução para vários navegadores é simular os objetos em, Storage.prototypepor exemplo

em vez de spyOn (localStorage, 'setItem') use

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

retirado das respostas de bzbarsky e teogeos aqui https://github.com/jasmine/jasmine/issues/299

Existe alguma biblioteca para zombar localStorage?

Acabei de escrever um:

(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

})();

Meu teste inicial mostra que localStorage se recusa a ser atribuível no firefox

Apenas no contexto global. Com uma função de invólucro como acima, funciona perfeitamente.

Aqui está um exemplo usando sinon spy e mock:

// window.localStorage.setItem
var spy = sinon.spy(window.localStorage, "setItem");

// You can use this in your assertions
spy.calledWith(aKey, aValue)

// Reset localStorage.setItem method    
spy.reset();



// window.localStorage.getItem
var stub = sinon.stub(window.localStorage, "getItem");
stub.returns(aValue);

// You can use this in your assertions
stub.calledWith(aKey)

// Reset localStorage.getItem method
stub.reset();

Substituir a localStoragepropriedade do windowobjeto global, conforme sugerido em algumas das respostas, não funcionará na maioria dos mecanismos JS, porque eles declaram a localStoragepropriedade de dados como não gravável e não configurável.

No entanto, descobri que pelo menos com a versão do WebKit do PhantomJS (versão 1.9.8) você poderia usar a API legada __defineGetter__para controlar o que acontece se localStoragefor acessado. Ainda assim, seria interessante se isso funcionasse em outros navegadores também.

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 });

O benefício dessa abordagem é que você não precisa modificar o código que está prestes a testar.

Você não precisa passar o objeto de armazenamento para cada método que o utiliza. Em vez disso, você pode usar um parâmetro de configuração para qualquer módulo que toque o adaptador de armazenamento.

Seu módulo antigo

// hard to test !
export const someFunction (x) {
  window.localStorage.setItem('foo', x)
}

// hard to test !
export const anotherFunction () {
  return window.localStorage.getItem('foo')
}

Seu novo módulo com função de configuração de "wrapper"

export default function (storage) {
  return {
    someFunction (x) {
      storage.setItem('foo', x)
    }
    anotherFunction () {
      storage.getItem('foo')
    }
  }
}

Quando você usa o módulo no código de teste

// import mock storage adapater
const MockStorage = require('./mock-storage')

// create a new mock storage instance
const mock = new MockStorage()

// pass mock storage instance as configuration argument to your module
const myModule = require('./my-module')(mock)

// reset before each test
beforeEach(function() {
  mock.clear()
})

// your tests
it('should set foo', function() {
  myModule.someFunction('bar')
  assert.equal(mock.getItem('foo'), 'bar')
})

it('should get foo', function() {
  mock.setItem('foo', 'bar')
  assert.equal(myModule.anotherFunction(), 'bar')
})

A MockStorageclasse pode ser assim

export default class MockStorage {
  constructor () {
    this.storage = new Map()
  }
  setItem (key, value) {
    this.storage.set(key, value)
  }
  getItem (key) {
    return this.storage.get(key)
  }
  removeItem (key) {
    this.storage.delete(key)
  }
  clear () {
    this.constructor()
  }
}

Ao usar seu módulo no código de produção, em vez disso, passe o adaptador localStorage real

const myModule = require('./my-module')(window.localStorage)

Decidi reiterar meu comentário à resposta de Pumbaa80 como uma resposta separada para que seja mais fácil reutilizá-la como uma biblioteca.

Peguei o código do Pumbaa80, refinei um pouco, adicionei testes e publiquei como um módulo npm aqui: https://www.npmjs.com/package/mock-local-storage .

Aqui está um código-fonte: https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js

Alguns testes: https://github.com/letsrock-today/mock-local-storage/blob/master/test/mock-localstorage.js

O módulo cria localStorage e sessionStorage simulados no objeto global (janela ou global, qual deles é definido).

Em meus outros testes de projeto, eu o solicitei com o mocha da seguinte forma: mocha -r mock-local-storagepara disponibilizar definições globais para todo o código em teste.

Basicamente, o código se parece com o seguinte:

(function (glob) {

    function createStorage() {
        let s = {},
            noopCallback = () => {},
            _itemInsertionCallback = noopCallback;

        Object.defineProperty(s, 'setItem', {
            get: () => {
                return (k, v) => {
                    k = k + '';
                    _itemInsertionCallback(s.length);
                    s[k] = v + '';
                };
            }
        });
        Object.defineProperty(s, 'getItem', {
            // ...
        });
        Object.defineProperty(s, 'removeItem', {
            // ...
        });
        Object.defineProperty(s, 'clear', {
            // ...
        });
        Object.defineProperty(s, 'length', {
            get: () => {
                return Object.keys(s).length;
            }
        });
        Object.defineProperty(s, "key", {
            // ...
        });
        Object.defineProperty(s, 'itemInsertionCallback', {
            get: () => {
                return _itemInsertionCallback;
            },
            set: v => {
                if (!v || typeof v != 'function') {
                    v = noopCallback;
                }
                _itemInsertionCallback = v;
            }
        });
        return s;
    }

    glob.localStorage = createStorage();
    glob.sessionStorage = createStorage();
}(typeof window !== 'undefined' ? window : global));

Observe que todos os métodos adicionados por meio de Object.definePropertypara que não sejam iterados, acessados ​​ou removidos como itens regulares e não contam em comprimento. Também adicionei uma maneira de registrar o retorno de chamada que é chamado quando um item está prestes a ser colocado no objeto. Este retorno de chamada pode ser usado para emular o erro de cota excedida em testes.

Descobri que não precisava zombar disso. Eu poderia alterar o armazenamento local real para o estado que eu queria por meio de setItem, em seguida, apenas consultar os valores para ver se ele mudou via getItem. Não é tão poderoso quanto zombeteiro, pois você não consegue ver quantas vezes algo foi alterado, mas funcionou para meus propósitos.

Infelizmente, a única maneira de simular o objeto localStorage em um cenário de teste é alterar o código que estamos testando. Você tem que envolver seu código em uma função anônima (o que você deve fazer de qualquer maneira) e usar "injeção de dependência" para passar uma referência ao objeto de janela. Algo como:

(function (window) {
   // Your code
}(window.mockWindow || window));

Então, dentro do seu teste, você pode especificar:

window.mockWindow = { localStorage: { ... } };

É assim que gosto de fazer. Mantém tudo simples.

  let localStoreMock: any = {};

  beforeEach(() => {

    angular.mock.module('yourApp');

    angular.mock.module(function ($provide: any) {

      $provide.service('localStorageService', function () {
        this.get = (key: any) => localStoreMock[key];
        this.set = (key: any, value: any) => localStoreMock[key] = value;
      });

    });
  });

créditos para https://medium.com/@armno/til-mocking-localstorage-and-sessionstorage-in-angular-unit-tests-a765abdc9d87 Faça um armazenamento local falso e espie o armazenamento local, quando for calado

 beforeAll( () => {
    let store = {};
    const mockLocalStorage = {
      getItem: (key: string): string => {
        return key in store ? store[key] : null;
      },
      setItem: (key: string, value: string) => {
        store[key] = `${value}`;
      },
      removeItem: (key: string) => {
        delete store[key];
      },
      clear: () => {
        store = {};
      }
    };

    spyOn(localStorage, 'getItem')
      .and.callFake(mockLocalStorage.getItem);
    spyOn(localStorage, 'setItem')
      .and.callFake(mockLocalStorage.setItem);
    spyOn(localStorage, 'removeItem')
      .and.callFake(mockLocalStorage.removeItem);
    spyOn(localStorage, 'clear')
      .and.callFake(mockLocalStorage.clear);
  })

E aqui nós usamos

it('providing search value should return matched item', () => {
    localStorage.setItem('defaultLanguage', 'en-US');

    expect(...
  });