2017-01-18 14 views
0

jestとjsdomを私の反応プロジェクトにインストールしましたが、window.localStorage変数を使用する反応コンポーネントのインポートに問題があります。私は、問題を解決すると信じていたjsdom用のセットアップファイルを追加しました。ここでjestをjestで設定するには

は私の設定です:package.jsonで

冗談の設定

"jest": { 
    "verbose": true, 
    "testEnvironment": "jsdom", 
    "testURL": "http://localhost:8080/Dashboard/index.html", 
    "transform": { 
     "^.+\\.js$": "<rootDir>/node_modules/babel-jest", 
     "^.+\\.jsx$": "<rootDir>/node_modules/babel-jest" 
    }, 
    "unmockedModulePathPatterns": [ 
     "node_modules/react/", 
    ], 
    "moduleFileExtensions": [ 
     "js", 
     "jsx", 
     "json", 
     "es6" 
    ] 
    } 

setup.js

import jsdom from 'jsdom'; 

const DEFAULT_HTML = '<html><body></body></html>'; 

global.document = jsdom.jsdom(DEFAULT_HTML); 

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

test.js

'use strict'; 
import setup from './setup'; 
import React from 'react'; 
import jsdom from 'jsdom'; 
import Reportlet from '../components/Reportlet.jsx'; 

it('Ensures the react component renders',() => { 

}); 

マイreportletコンポーネントの使用localStor age変数が、叫ぶ:

Cannot read property getItem of undefinedを私はlocalStorage.getItem(<some item>)

を呼び出すときに、私は冗談が来ることをhereを読んでjsdomに同梱されますが、私は余分なjsdom依存性を必要とするかどうかわかりません。私はhereを読んでjsdomを最初に反応させる前にロードする必要があることも読んでいます。

jsdomでjestを正しく設定する方法を知っている人はいますか?

+1

jsdomはのlocalStorageをサポートしていません。 Node-localstorageのようなノードにやさしいスタブを使うことができるようです - https://github.com/tmpvar/jsdom/issues/1137のコメントの一番下を参照するか、https:// github.com/letsrock-today/mock-local-storageまたは自分自身を回すhttp://stackoverflow.com/questions/11485420/how-to-mock-localstorage-in-javascript-unit-tests –

+1

ああ私はそれを見るjsdomの機能が欠落していることに特有です。私はあなたの提案したnode-localstorageのソリューションを使って私の問題を解決しました。これを回答として書式化すると、私はそれを正解として喜んで受け入れます。 –

+0

うれしい私は助けることができました!私は私のマシンに戻ってきたときに答えを返すよ(今の電話で)。ありがとう! –

答えて

1

jsdomはlocalStorageをサポートしていません。 'node-localstorage'のようなノードに優しいスタブを使用できるようです。 https://github.com/tmpvar/jsdom/issues/1137

でのコメントの下を見るか、https://github.com/letsrock-today/mock-local-storage

ようなもので、それを模擬...またはここに見られるように、独自のモックをロールバックすることができます:How to mock localStorage in JavaScript unit tests?