前提・実現したいこと
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
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー