Jsdom: localstorage는 jsdom 내에서 작동하지 않습니다

불행히도 ES2015 프록시 없이는 매우 어렵습니다. (. getItem/setItem/etc.가 작동하도록 할 수 있지만 속성 수정을 올바르게 적용하는 것은 실제로 불가능합니다.

적어도 인메모리 경험, 즉 sessionStorage와 유사한 동작을 갖는 localStorage가 있으면 좋을 것입니다.
덜 복잡해야 합니까?

아니요. API를 충분히 에뮬레이트할 수 없기 때문입니다. 간단한 사용 사례(예: getItem/setItem만 사용)의 경우 작동할 수 있지만 속성에 직접 액세스하는 즉시 구현이 중단됩니다.

@Sebmaster : 별도의 패키지에 대한 단위 테스트에 사용하기 위해 스토리지 인터페이스에 대한 간단한 shim을 작성했습니다.

https://github.com/mnahkies/node-storage-shim

현재 일시적인 솔루션이며 스토리지 인터페이스의 메서드 이름과 충돌하는 키 설정을 금지합니다. 또한 현재 사양의 이벤트 발생 부분을 구현하지 않습니다.

실제 localStorage는 setItem을 사용하여 이러한 키를 설정할 수 있지만 속성 액세스를 사용하면 기능 정의가 날아가고 일단 설정되면 속성 액세스를 사용하여 해당 키에 액세스할 수 없습니다.

그러나 이러한 제한 사항을 제외하고는 꽤 충실한 구현이라고 생각합니다.
https://github.com/mnahkies/node-storage-shim/blob/master/test.js

API의 어떤 측면을 충분히 에뮬레이트할 수 없는지 자세히 설명해 주시겠습니까?

내가 말할 수 있는 한 현재 에뮬레이트할 수 없는 주요 사항은 속성 설정에 대한 응답으로 발생하는 스토리지 이벤트입니다.

언급된 주의 사항으로 충분히 완료되었다고 생각한다면 jsdom과 통합할 수 있게 되어 기쁩니다.

API의 어떤 측면을 충분히 에뮬레이트할 수 없는지 자세히 설명해 주시겠습니까?

localStorage는 다음과 같이 인터페이스에서 직접 속성 이름 설정을 지원합니다.

localStorage.myKey = "myVal";
localStorage.getItem('myKey') // 'myVal'

localStorage.setItem('otherKey', 'val')
localStorage.otherKey // 'val'

setItem이 호출되면 항상 getter를 생성하여 어느 정도 에뮬레이트할 수 있지만 프록시 없이는 반대 방향(객체에 임의 속성 설정)을 지원할 수 없습니다.

맞습니다. 속성 액세스로 키를 설정하는 것과 관련된 주요 문제는 실제 인터페이스처럼 값을 문자열로 올바르게 강제 변환할 수 없다는 것입니다.

네, 이는 로컬 스토리지의 매우 중요한 측면입니다. 이를 위해 ES6 프록시가 필요합니다. v8은 아직 이를 구현하지 않았습니다(microsoft와 mozilla는 이미 가지고 있습니다!)

우리는 jsdom의 여러 위치에서 동일한 로드 블록을 치고 있습니다.

이것이 작동하지 않는 이유를 이해할 수 없습니다.

var localStorage = {
  getItem: function (key) {
    return this[key];
  },
  setItem: function (key, value) {
    this[key] = value;
  }
};

localStorage.setItem('foo', 'bar');
localStorage.bar = 'foo'
assert(localStorage.foo === 'bar')
assert(localStorage.getItem('bar') === 'foo')

내가 무엇을 놓치고 있습니까?

속성 액세스를 사용하여 항목을 설정할 때 실제 localStorage는 항상 값을 문자열로 강제 변환합니다.

예:

localStorage.foo = 35
assert(typeof localStorage.foo === "string")

localStorage.foo = {my: 'object'}
assert(localStorage.foo === "[object Object]")

이것은 ES6 프록시 없이는 불가능하며 localStorage의 중요한 특성입니다.

알 겠어요. 비록 당신이 그 수치를 당신에게하고 있다면 ;)

더 중요한 것은 객체로 그렇게 하는 경우 jsdom에 의해 마스킹된 다음 브라우저에서 발생하는 버그일 수 있다는 것입니다.

+1

+1

아마도 이와 같은 것이 https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage ?

위에서 설명한 것처럼 실제 로컬 저장소가 가지고 있는 일부 동작을 여전히 놓치고 있다는 것을 알게 될 것입니다.

연결된 솔루션은 좋은 폴리필을 만들지만 jsdom에 대한 충실한 구현이 될 것이라고 생각하지 않습니다.

@mnahkies 솔직히, polyfill은 없는 것보다 낫습니다(지금 가지고 있는 것입니다). 당신은 그것을 넣고 99%의 사람들이 어쨌든 부딪히지 않을 한계에 대한 몇 가지 문서를 추가해야 합니다.

마지막 주석에 +1, MDN의 예 는 setItem 및 getItem 를 저장소에 대한 접근자로 사용합니다. 따라서 우리가 실제로 놓치고 있는 일반적인 사용 사례로 간주할 수 있습니다.

지금은 jasmine.createSpy 해결합니다.

@justinmchase 의 솔루션은 테스트에 적합합니다. sessionStorage도 추가하고 싶을 수 있습니다.

    var jsdom = require('jsdom').jsdom;
    document = jsdom('hello world');
    window = document.defaultView;
    navigator = window.navigator;
    window.localStorage = window.sessionStorage = {
        getItem: function (key) {
            return this[key];
        },
        setItem: function (key, value) {
            this[key] = value;
        }
    };

FAIK 이것은 잘 조롱합니다. 내 테스트 중 일부를 수정합니다. 감사 해요.

누군가 실수로 속성 액세스를 사용하여 로컬 저장소에 개체를 작성하고 미묘한 버그를 생성할 때까지 테스트를 수정합니다.

제 생각에는 테스트에서 메모리 솔루션으로 작동할 수 있는 스왑 가능한 스토리지 백엔드로 스토리지를 추상화하는 객체를 갖는 것이 더 나을 것입니다.

또한 나중에 필요할 경우 암호화, 압축, 캐싱을 통한 쓰기 등과 같은 복잡한 작업을 더 쉽게 수행할 수 있습니다.

때가됐다!!!

Node.js v6이 나왔고, 그것과 함께... PROXIES.

@Sebmaster , 명명된 getters/setters/deleters가 있을 때 프록시를 생성할 수 있도록 webidl2js를 업데이트하시겠습니까? NamedNodeMap이나 NodeList 등과 같은 다른 것들에 대해 걱정하기 전에 먼저 이 요청을 대상으로 해야 한다고 생각합니다. 이것은 훌륭하고 독립적이며 핵심 프리미티브의 성능에 영향을 미치지 않습니다.

https://html.spec.whatwg.org/multipage/webstorage.html#storage -2에는 지원해야 하는 IDL이 있습니다. 갈 방법은 단순히 프록시의 get 동작 대리자를 impl의 getItem 등으로 만드는 것입니다.

+1

node-localstorage를 사용할 수 있습니다.

var LocalStorage = require('node-localstorage').LocalStorage;
global.localStorage = new LocalStorage('./build/localStorageTemp');

global.document = jsdom('');

global.window = document.defaultView;
global.window.localStorage = global.localStorage;

@adjavaherian @justinmchase 나는 react-jwt-auth 와 react-jwt-auth-redux 모두에서 테스트하는 데 사용하는 jsdom을 가지고 놀고 있었고 훌륭하게 작동합니다. 그러나 나는 또한 동형 개발을 위한 enverse - 환경 검사에 대해 일하고 있습니다. 수표 중 하나는 localStorage 및 sessionStorage 입니다. 나는 그것을 올바르게 테스트하는 방법에 대한 동일한 문제에 대해 정확히 실행했으며 귀하의 polyfil은 훌륭하게 작동합니다. 감사합니다! 기본적으로 jsdom이 함께 제공된다면 좋을 것입니다.

이에 대한 webidl2js 지원이 이제 제자리에 있습니다. 사람들이 이것을 받아들이고 싶다면 최근에 나온 DOMStringList 구현(데이터 세트용)을 연구하는 것이 좋습니다.

현재로서는 모든 것을 메모리에 보관할 수 있지만 결국 사람들이 원할 경우 디스크에 저장하는 방법을 제공해야 합니다. (사람들이 그걸 원해?)

이를 구현하기 위해 노력하고 싶습니다. 나에게 문제를 할당할 수 있습니다.

키가 저장되어 있지 않은 경우, 때문에이 모형은 잘 작동 localStorage.getItem() 반환하도록되어 null 하지 undefined :

const jsdom = require('jsdom');
// setup the simplest document possible
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');;

// get the window object out of the document
const win = doc.defaultView;

win.localStorage = win.sessionStorage = {
  getItem: function(key) {
    const value = this[key];
    return typeof value === 'undefined' ? null : value;
  },
  setItem: function (key, value) {
    this[key] = value;
  },
  removeItem: function(key) {
    return delete this[key]
  }
};

// set globals for mocha that make access to document and window feel
// natural in the test environment
global.document = doc;
global.window = win;

왜 관련이 있습니까? 아래 줄은 브라우저 환경에서 잘 작동합니다. json.parse() undefined 를 인수로 전달하면 json.parse() 가 실패하지만 매개변수로 null 하면 잘 작동합니다.

let users = JSON.parse(localStorage.getItem('users')) || [];

@simoami win.localStorage = win.sessionStorage = { ... } 연결되는 할당을 조심하세요. 두 변수에 할당된 동일한 개체 참조이므로 둘 중 하나의 get/set 함수를 호출하면 동일한 기본 개체에 액세스할 수 있습니다. 예를 들어 localStorage.set('foo', 'bar') 호출하면 sessionStorage.get('foo') 가 작동합니다. 간단한 테스트에서는 괜찮을 수 있지만 별도의 저장 공간이 필요한 모든 것은 엉망이 됩니다.

https://gist.github.com/rkurbatov/17468b2ade459a7498c8209800287a03 - 이 폴리필을 로컬/세션 스토리지 모두에 사용합니다. @capaj의 https://github.com/capaj/localstorage-polyfill 을 기반으로 합니다.

나중에 이 스레드를 우연히 발견한 사람들은 최근 jsdom 개선 후에 window._localStorage 를 자신의 모의 저장소로 설정해야 합니다.

피드백으로 이 문제에 대한 해결책으로 언급된 기본 localStorage 이벤트를 찾을 수 없습니다.

그리고 jsdom을 병렬로 사용하고 localStorage를 많이 사용하는 사람에게는 node-localstorage 등은 거의 쓸모가 없으므로 바퀴를 다시 발명하는 것이 좋습니다. 병렬 사용을 위해 설계되지 않았습니다. for(var key in localStorage) 또는 Object.keys(localStorage) 등과 같은 기본 기능도 작동하지 않습니다.