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

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

ただいまの
回答率

90.50%

  • React.js

    1114questions

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

  • Redux

    152questions

  • ユニットテスト

    39questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 88

panshoku

score 1

前提・実現したいこと

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

import React from 'react'
import { configure, shallow, mount, render } from 'enzyme'
import App from '@/components/App'
import reducer, { initialState } from '@/modules/names/names' // エラー

import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

import { Provider } from 'react-redux'
import { store } from '@/instance'

test('init', () => {
    expect(reducer(undefined, { type: '@@INIT' })).toEqual(initialState)
})

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

const WORD = 'project/names/word'
...
export const action = {
    word: (word) => {
        return (dispatch, getState) => {
            dispatch({
                type: WORD,
                payload: word,
            })
        }
    },
    ...
}

export const initialState = {
    word: '',
    names: [],
    editingNames: [],
    orgNames: [],
    isShowTable: false,
    ...
}

export default function reducer(state = initialState, action) {
    switch (action.type) {
        case WORD:
            return {
                ...state,
                word: action.payload,
            }
        ...
    }
}

ディレクトリ構成

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

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'

import names from '@/modules/names/reducer'

export default combineReducers({
    names,
    routing: routerReducer,
})

modules/names/reducer.js

import { combineReducers } from 'redux'
import names from '@/modules/names/names'

export default (state = {}, action) => {
    return combineReducers({
        names,
    })(state, action)
}

よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • odyu

    2019/05/15 16:13

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

    キャンセル

  • panshoku

    2019/05/15 16:23

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

    キャンセル

回答 1

checkベストアンサー

0

modules/names/names.jsを

export const action = {
    ...
}

export const initialState = {
    ...
}

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

export default reducer

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/20 11: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,

    ```

    キャンセル

同じタグがついた質問を見る

  • React.js

    1114questions

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

  • Redux

    152questions

  • ユニットテスト

    39questions

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