entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://www.npmjs.com/package/dom-storage|blocks|key|2411949|text|你可以使用通过+npm+获得的dom-storage+包：|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|2411950|const+Storage+=+require('dom-storage');
global.localStorage+=+new+Storage(null,+{+strict:+true+});
global.sessionStorage+=+new+Storage(null,+{+strict:+true+});|code-block|syntax|javascript|2411951|我们使用最新版本的jsdom进行单元测试，上面的方法效果很好。|CODE^0|F|B|F|B|0|0|0|9|5^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|U|G|@$H|V|I|W|J|K]]|L|@$H|X|I|Y|A|Z]]|6|$]]|$A|M|C|N|2|O|F|10|G|@]|L|@]|6|$P|Q]]|$A|R|C|S|2|E|F|11|G|@$H|12|I|13|J|T]]|L|@]|6|$]]]]

You can use the <a href="https://www.npmjs.com/package/dom-storage" rel="nofollow noreferrer">dom-storage</a> package available via npm:

<pre><code>const Storage = require('dom-storage');
global.localStorage = new Storage(null, { strict: true });
global.sessionStorage = new Storage(null, { strict: true });
</code></pre>

We use the latest release of <code>jsdom</code> for our unit tests and the above method has worked great.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://github.com/facebook/jest/issues/6858#issuecomment-413677180|blocks|key|2411982|text|setItemSpy+=+jest.spyOn(Storage.prototype,+'setItem');为我工作。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|2411983|在这里看到了这个修复：https://github.com/facebook/jest/issues/6858#issuecomment-413677180|2411984^0|0|1I|0|B|1V|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|P|G|@$H|Q|I|R|J|K]]|L|@]|6|$]]|$A|M|C|N|2|E|F|S|G|@]|L|@$H|T|I|U|A|V]]|6|$]]|$A|O|C|-4|2|E|F|W|G|@]|L|@]|6|$]]]]

<code>setItemSpy = jest.spyOn(Storage.prototype, 'setItem');</code> works for me.

Saw this fix here: <a href="https://github.com/facebook/jest/issues/6858#issuecomment-413677180" rel="noreferrer">https://github.com/facebook/jest/issues/6858#issuecomment-413677180</a>

entityMap|blocks|key|2622440|text|我创建了一个模拟localStorage的函数。它只实现了两个方法getItem和setItem。如果需要，您可以很容易地添加其他方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2622441|export+const+localStorageImpl+=+{
++++register:+()+=>+{
++++++++let+storage+=+(window+as+any).customLocalStorage;

++++++++if(storage)+{
++++++++++++return+{
++++++++++++++++storage,
++++++++++++++++methods:+(window+as+any).customLocalStorageMethods
++++++++++++}
++++++++}

++++++++storage+=+(window+as+any).customLocalStorage+=+{}+as+any;

++++++++const+setItem+=+jest.spyOn(Storage.prototype,+'setItem');
++++++++setItem.mockImplementation((key,+value)+=>+{
++++++++++++storage[key]+=+value;
++++++++});

++++++++const+getItem+=+jest.spyOn(Storage.prototype,+'getItem');
++++++++getItem.mockImplementation((key)+=>+{
++++++++++++return+storage[key];
++++++++});

++++++++const+methods+=+(window+as+any).customLocalStorageMethods+=+{
++++++++++++setItem,
++++++++++++getItem
++++++++};

++++++++return+{
++++++++++++storage,
++++++++++++methods
++++++++}
++++},
++++unregister:+()+=>+{
++++++++const+methods+=+(window+as+any).customLocalStorageMethods;
++++++++if(methods){
++++++++++++const+{+setItem,+getItem+}+=+methods+as+{+setItem:+jest.SpyInstance<void,+[key:+string,+value:+string]>,+getItem:+jest.SpyInstance<string,+[key:+string]>+};
++++++++++++setItem.mockReset();
++++++++++++getItem.mockReset();
++++++++}
++++++++delete+(window+as+any).customLocalStorageMethods;
++++++++delete+(window+as+any).customLocalStorage;
++++}
}|code-block|syntax|javascript|2622442|用法：|2622443|it('should+mock+localStorage',+()+=>+{++++++++
++++const+{+methods+}+=+localStorageImpl.register();+//+mock+localStorage
++++
++++const+{+getByTestId+}+=+render(<Root+/>);
++++fireEvent.click(getByTestId('column-size'));++++++++
++++expect(methods.setItem).toBeCalledTimes(1);

++++localStorageImpl.unregister();
});|2622444^0|8|C|X|7|15|7|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@$A|R|B|S|C|D]|$A|T|B|U|C|D]|$A|V|B|W|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|X|9|@]|E|@]|F|$J|K]]|$2|L|4|M|6|7|8|Y|9|@]|E|@]|F|$]]|$2|N|4|O|6|I|8|Z|9|@]|E|@]|F|$J|K]]|$2|P|4|-4|6|7|8|10|9|@]|E|@]|F|$]]]]

I've create a function that mocks <code>localStorage</code>. It implements only two methods <code>getItem</code> and <code>setItem</code>. You can easily add other methods if needed.
<pre><code>export const localStorageImpl = {
 register: () =&gt; {
 let storage = (window as any).customLocalStorage;

 if(storage) {
 return {
 storage,
 methods: (window as any).customLocalStorageMethods
 }
 }

 storage = (window as any).customLocalStorage = {} as any;

 const setItem = jest.spyOn(Storage.prototype, 'setItem');
 setItem.mockImplementation((key, value) =&gt; {
 storage[key] = value;
 });

 const getItem = jest.spyOn(Storage.prototype, 'getItem');
 getItem.mockImplementation((key) =&gt; {
 return storage[key];
 });

 const methods = (window as any).customLocalStorageMethods = {
 setItem,
 getItem
 };

 return {
 storage,
 methods
 }
 },
 unregister: () =&gt; {
 const methods = (window as any).customLocalStorageMethods;
 if(methods){
 const { setItem, getItem } = methods as { setItem: jest.SpyInstance&lt;void, [key: string, value: string]&gt;, getItem: jest.SpyInstance&lt;string, [key: string]&gt; };
 setItem.mockReset();
 getItem.mockReset();
 }
 delete (window as any).customLocalStorageMethods;
 delete (window as any).customLocalStorage;
 }
}
</code></pre>
Usage:
<pre><code>it('should mock localStorage', () =&gt; { 
 const { methods } = localStorageImpl.register(); // mock localStorage
 
 const { getByTestId } = render(&lt;Root /&gt;);
 fireEvent.click(getByTestId('column-size')); 
 expect(methods.setItem).toBeCalledTimes(1);

 localStorageImpl.unregister();
});
</code></pre>

Since the latest release of JSDom, I'm not able to mock <code>localStorage</code> anymore.

I've tried the following methods:

<ol>
<li><code>Object.defineProperty(window, 'localStorage', {value: LocalStorageMock})</code></li>
<li><code>window.localStorage = LocalStorageMock;</code></li>
<li><code>jest.spyOn(window.localStorage, 'setItem')</code></li>
</ol>

Any of those methods not worked for me, I get always the original <code>localStorage</code>.

JSDom 11.12.0 - how to mock localStorage?

单元测试

自从最新的JSDom发布以来，我再也不能模仿localStorage了。我尝试了以下方法：Object.defineProperty(window, 'localStorage', {value: LocalStorageMock})window.localStorage = LocalStorageMock;jest...

问JSDom 11.12.0 -如何模拟localStorage？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JSDom 11.12.0 -如何模拟localStorage？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JSDom 11.12.0 -如何模拟localStorage？
EN