運行摩卡給出的錯誤'ReferenceError：sessionStorage未定義'

Question

我爲我的ReactJs應用程序（主要是ES6格式）設置了Mocha。

在運行使用"test": "mocha --compilers js:babel-register --recursive"設置中的package.json我得到以下輸出測試：

purezen_@mb ~/workspace/webapp (Test-Setup●●)$ npm test 

> webapp@0.1.0 test /Users/purezen_/workspace/webapp 
> mocha --compilers js:babel-register --recursive 

/Users/purezen_/workspace/webapp/src/js/data/reducers/auth.js:31 
var auth = sessionStorage.getItem('auth'); 
     ^

ReferenceError: sessionStorage is not defined 
    at Object.<anonymous> (auth.js:5:14) 
    at Module._compile (module.js:397:26) 
    at loader (/Users/purezen_/workspace/kredx-fe/client/node_modules/babel-register/lib/node.js:158:5) 
    at Object.require.extensions.(anonymous function) [as .js] (/Users/purezen_/workspace/webapp/node_modules/babel-register/lib/node.js:168:7) 
    at Module.load (module.js:343:32) 
    at Function.Module._load (module.js:300:12) 
    at Module.require (module.js:353:17) 
    at require (internal/module.js:12:17) 
    at Object.<anonymous> (index.js:5:1) 
    at Module._compile (module.js:397:26) 
    at loader (/Users/purezen_/workspace/webapp/node_modules/babel-register/lib/node.js:158:5) 

測試/動作/ actions.spec.js

import configureMockStore from 'redux-mock-store' 
import createSagaMiddleware from 'redux-saga' 
import sagas from 'data/sagas' 
import nock from 'nock' 
import expect from 'expect' 

(function (glob) { 
    function mockStorage() { 
     var storage = {}; 
     return { 
      setItem: function(key, value) { 
       storage[key] = value || ''; 
      }, 
      getItem: function(key) { 
       return storage[key]; 
      }, 
      removeItem: function(key) { 
       delete storage[key]; 
      }, 
      get length() { 
       return Object.keys(storage).length; 
      }, 
      key: function(i) { 
       var keys = Object.keys(storage); 
       return keys[i] || null; 
      } 
     }; 
    } 
    glob.localStorage = mockStorage(); 
    glob.sessionStorage = mockStorage(); 
}(typeof window !== 'undefined' ? window : global)); 

const sagaMiddleware = createSagaMiddleware(sagas) 
const middlewares = [ sagaMiddleware ] 
const mockStore = configureMockStore(middlewares) 
// const storeWithMiddleware = applyMiddleware(middlewares)(mockStore) 

console.log(mockStore) 

我曾嘗試在spec文件中實現模擬會話存儲，但這似乎沒有幫助。

編輯：這是我的auth.js的要求，在意見

import * as c from 'data/constants' 
import {Map} from 'immutable' 

// Load auth details from session storage 
const auth = sessionStorage.getItem('auth'); 
const defaultState = Map(JSON.parse(auth)); 

export default function (state=defaultState, action) { 
    const { type, payload} = action 
    switch (type) { 
    case c.SET_AUTH: { 
     return Map(payload) 
    } 
    } 
    return state; 
} 

Answer 1

好吧，我看到的問題。你試圖在你的測試中設置一個全局sessionStorage，這很好，但是摩卡通過before更容易。這個例子應該可以幫助你移動事物。

這是規格應該是什麼樣子。

import configureMockStore from 'redux-mock-store' 
import createSagaMiddleware from 'redux-saga' 
import sagas from '../sagas' 
import nock from 'nock' 
import expect from 'expect' 

describe('test the sagas', function(){ 

    before(function(){ 

    if(typeof window !== 'undefined') { 
     console.log('window is defined'); 
     global = window; 
    } 

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

    global['localStorage'] = mockStorage(); 
    global['sessionStorage'] = mockStorage(); 

    }); 

    it('should bootstrap a saga and store', function(){ 

    const sagaMiddleware = createSagaMiddleware(sagas); 
    const middlewares = [ sagaMiddleware ]; 
    const mockStore = configureMockStore(middlewares); 
    console.log('mockStore', mockStore); 

    }); 

}); 

注意如何，而不是使用IIFE，我們可以使用before這是由摩卡提供。這允許您在測試開始之前設置諸如global.sessionStorage之類的內容。整個事情應該包含在describe中，您應該使用it來確定實際的單元測試。

在before函數中完成了這個引導，你對auth.js的測試可能會正常工作。

我發表了這個whole example to github，其他async_action示例來自另一篇文章。你可以檢查一下，並按照自述文件，這兩個規範應該工作。祝你好運。

Answer 2

//這摩卡test文件夾應該去/ helpers.js

import jsdom from 'jsdom'; 

// Jsdom document & window 
    const doc = jsdom.jsdom('<!doctype html><html><body></body><div id="react-root"></div></html>'); 

    const win = doc.defaultView; 
// Add to global 
    global.document = doc; 
    global.window = win; 

    global.localStorage = {}; 

// Add window keys to global window 
Object.keys(window).forEach((key) => { 
if (!(key in global)) { 
global[key] = window[key]; 
} 
});