unit-testing - 如何使用 sinon 对 localStorage 进行单元测试

Question

我正在尝试使用 sinon 测试 localStorage。基本上我对单元测试非常陌生，所以这可能是非常基础的。

更新

我设法想出了这个，但现在它给了我一个新的错误应该包装对象的属性

测试

describe('Initial State', () => {
    it('should set the initial state for the component', () => {
const props = {
        currentUser: {}
      };
      sinon.stub(window.localStorage, 'setItem');
      window.localStorage.setItem('none', 'nothing');
    });
  });

Answer 1

我设法解决了这个问题。感谢@anoop，因为他的回答很有帮助，但我必须通过主要的解决方法来管理它。我正在使用jsdom，但它目前不支持localStorage。我在 jsdom 配置中添加了一个 fake。

if (!global.window.localStorage) {
  global.window.localStorage = {
    getItem() { return '{}'; },
    setItem() {}
  };
}

并断言它:

it('should fetch from local storage', () => {
      const props = {
        currentUser: 'UMAIR',
        user: {
          is_key: false
        }
      };

      const spy = sinon.spy(global.window.localStorage, "setItem");
      spy(props);
      expect(spy.calledWith( {
        currentUser: 'UMAIR',
        user: {
          is_key: false
        }
      }));
      spy.restore();

      const stub = sinon.stub(global.window.localStorage, 'getItem');
      stub(props);
      expect(stub.calledWith(Object.keys(props)));
// stub.restore();
    });

另请参阅: How to mock localStorage in JavaScript unit tests?

https://github.com/gor181/webpack-react-babel-mocha-boilerplate/tree/master/test/utils

一周前我还在 Sinon 中发现了与此相关的内部问题，但该问题已得到解决。

参见:https://github.com/sinonjs/sinon/issues/1129

希望这对某人有帮助。