mochaを実行中にエラーが発生しました 'ReferenceError：sessionStorage is not defined'

Question

ReactJsアプリ（ほとんどの場合、ES6形式）にMochaを設定しています。私が試してみました

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) 

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) 

actions.spec.js

テスト/アクションを/：私は次の出力を得るpackage.jsonに"test": "mocha --compilers js:babel-register --recursive"セットアップを使用してテストを実行するには

specファイルにモックセッションストレージを実装していますが、それは役に立たないようです。

EDIT：コメント

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

に要求されるようにここに私のauth.jsださて、私はこの問題を参照してください。あなたはあなたのテストの中からグローバルsessionStorageを設定しようとしていますが、それは良いことですが、Mochaはこれを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); 

    }); 

}); 

代わりに生命維持を使用しての、私たちはモカによって提供されbeforeを使用する方法に注意してください。これにより、テストが始まる前にglobal.sessionStorageなどの設定を行うことができます。全体をdescribeで囲んで、itを使用して実際の単体テストを識別する必要があります。

before関数でこのブートストラップが行われているため、auth.jsに対するテストはおそらく動作します。

私はwhole example to githubを公開しました。別の投稿の別のasync_actionの例です。あなたはそれをチェックアウトし、READMEに従うことができ、2つの仕様が機能するはずです。がんばろう。

Answer 2

//モカテストフォルダに行く必要があります。この/ 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]; 
} 
});