質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

5346閲覧

JESTのテストが通らない。ReferenceError: initialState is not defined。

yooonb

総合スコア17

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2019/05/09 08:58

編集2019/05/20 02:12

前提・実現したいこと

React-redux-routerで作成したUIのテストをしたいです。
テストを実行したところ「ReferenceError: initialState is not defined」というエラーが発生します。

使用しているパッケージの一部です。
"jest": "^22.4.4",
"react": "^16.1.1",
"redux": "^3.7.2",
"react-redux": "^5.0.6",
"react-router-redux": "^4.0.8",

stateを使用していないコンポーネントのテストは実行できました。
reduxでstate管理をしているものでエラーが出ます。

発生している問題・エラーメッセージ

ReferenceError: initialState is not defined 365 | names: [], 366 | editingNames: [], > 367 | orgNames: [], 368 | isShowTable: false, 369 | } 370 | at reducer (resources/assets/js/modules/names/names.js:367:26) at node_modules/redux/lib/combineReducers.js:53:24 at Array.forEach (<anonymous>) at assertReducerShape (node_modules/redux/lib/combineReducers.js:51:25) at combineReducers (node_modules/redux/lib/combineReducers.js:107:5) at Object.<anonymous>.exports.default (resources/assets/js/modules/names/reducer.js:16:39) at node_modules/redux/lib/combineReducers.js:53:24 at Array.forEach (<anonymous>) at assertReducerShape (node_modules/redux/lib/combineReducers.js:51:25) at combineReducers (node_modules/redux/lib/combineReducers.js:107:5) at Object.<anonymous> (resources/assets/js/modules/reducer.js:33:46) at Object.<anonymous> (resources/assets/js/store/store.dev.js:20:16) at Object.<anonymous> (resources/assets/js/store/index.js:4:122) at Object.<anonymous> (resources/assets/js/instance.js:12:14) at Object.<anonymous> (resources/assets/js/modules/api/api.js:11:17) at Object.<anonymous> (resources/assets/js/modules/names/names.js:9:12) at Object.<anonymous> (resources/assets/js/test/sample.test.js:13:25)

該当のソースコード

テストファイル:test/sample.test.js

js

1import React from 'react' 2import { configure, shallow, mount, render } from 'enzyme' 3import App from '@/components/App' 4import reducer, { initialState } from '@/modules/names/names' // エラー 5 6import Adapter from 'enzyme-adapter-react-16' 7configure({ adapter: new Adapter() }) 8 9import { Provider } from 'react-redux' 10import { store } from '@/instance' 11 12test('init', () => { 13 expect(reducer(undefined, { type: '@@INIT' })).toEqual(initialState) 14}) 15 16

アクション・リデューサーファイル:modules/names/names.js

js

1const WORD = 'project/names/word' 2... 3export const action = { 4 word: (word) => { 5 return (dispatch, getState) => { 6 dispatch({ 7 type: WORD, 8 payload: word, 9 }) 10 } 11 }, 12 ... 13} 14 15export const initialState = { 16 word: '', 17 names: [], 18 editingNames: [], 19 orgNames: [], 20 isShowTable: false, 21 ... 22} 23 24export default function reducer(state = initialState, action) { 25 switch (action.type) { 26 case WORD: 27 return { 28 ...state, 29 word: action.payload, 30 } 31 ... 32 } 33}

ディレクトリ構成

project/  ├ resources/  │ └ assets/  │   └ js/  │     ├ components/  │     │  ├ names  │     │  │  └ Names.js  │     │  ├ App.js  │     │  └ Base.js  │     ├ modules/  │     │  ├ names/  │     │  │  ├ reducer.js  │     │  │  └ names.js  │     │  ├ reducer.js  │     │  └ common.js  │     ├ store/  │     ├ test/  │     │  ├ app.test.js  │     │  └ sample.test.js  │     ├ ...  │     ├ index.js  │     └ sass/

試してみたこと

tests/sample.test.jsの下記部分をコメントアウトしたところ、上記のエラーはでなったので、
/modules/names/names.js内でエラーが出ているのでは、と考えましたが、
それ以上どこを検証すればいいのかわからずにいます。
→import reducer, { initialState } from '@/modules/names/names'
※reducerはありませんというエラーは出ましたが...

追記

components / names / Names.js

const mapStateToProps = (state, props) => { return { word: state.names.names.word, }

modules/reducer.js

js

1import { combineReducers } from 'redux' 2import { routerReducer } from 'react-router-redux' 3 4import names from '@/modules/names/reducer' 5 6export default combineReducers({ 7 names, 8 routing: routerReducer, 9})

modules/names/reducer.js

js

1import { combineReducers } from 'redux' 2import names from '@/modules/names/names' 3 4export default (state = {}, action) => { 5 return combineReducers({ 6 names, 7 })(state, action) 8} 9

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

odyu

2019/05/15 07:13

@/modules/stores/storesManagement のファイルは記載してもらえないと判断できなさそうですが。転記できますか?
yooonb

2019/05/15 07:23

ご確認いただきありがとうございます。 test/sample.test.jsの@/modules/stores/storesManagementはこちらの書き間違えでした。 '@/modules/names/names'の読み込みでエラーが出ています。 names.jsの内容は抜粋して記載しています。 よろしくお願いします。
guest

回答1

0

ベストアンサー

modules/names/names.jsを

export const action = { ... } export const initialState = { ... } const reducer = (state = initialState, action) => { ... } export default reducer

このように修正したら動作しないですか?
テストが通るかは別です。

投稿2019/05/15 08:31

odyu

総合スコア548

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yooonb

2019/05/20 02:26

ありがとうございます!お返事が遅くなりすみませんでした。 無事、ReferenceError: initialState is not defined部分のエラーは出なくなりました。 アロー関数を使わないといけなかったのですね。 テストは通らず下記のエラーが出たのですが、 もしundefinedになる原因が思い当たれば教えていただけないでしょうか? よろしくお願いいたします。 エラー ``` TypeError: Cannot read property 'word' of undefined const mapStateToProps = (state, props) => { 188 | return { > 189 | word: state.names.names.word, ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問