テストでのみ表示されるRedux警告

Question

私はreact reduxでtic tac toeゲームを作成しました。

私はcreate-react-appを使用しています。

私は、次の店を持っている：私は期待どおり

import {createStore, combineReducers} from 'redux'; 
import gameSettingsReducer from './reducers/gameSettings.js'; 
import gameStatusReducer from './reducers/gameStatus.js'; 


const rootReducer = combineReducers({gameSettings: gameSettingsReducer, 
        gameStatus: gameStatusReducer}); 

export const defaultGameStatus = { 
     currentPlayerSymbol: "X", 
     turnNumber: 0, 
     currentView: "start-menu", //one of "start-menu", "in-game", "game-over" 
     winner: "draw", //one of "X", "O", "draw" 
     board: [["E", "E", "E"], 
       ["E", "E", "E"], 
       ["E", "E", "E"]], 
     lastMove: [] 
}; 

const store = createStore(rootReducer, { 
    gameSettings:{ 
     playerSymbol: "X", //one of "X", "O" 
     difficulty: "easy" //one of "easy", "hard" 
    }, 
    gameStatus: defaultGameStatus 
}); 


export default store; 

すべてが実行されます。私は、次の（npm testを）テストを実行していたときを除いて、コンソールに表示されます：私はいくつかのテストで

console.error node_modules\redux\lib\utils\warning.js:14 
    No reducer provided for key "gameStatus" 
console.error node_modules\redux\lib\utils\warning.js:14 
    Unexpected key "gameStatus" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "gameSettings". Unexpected keys will be ignored. 

を、私も店をテストしておりません。だから私はこれがコードをコンパイルする間に来ると思います。 ルート還元剤ラインの前にconsole.log(gameStatusReducer)を入れてみました。 これは、gameStatusReducerが未定義であることを示しています。

非常によく似た方法でgameSettingsReducerとgameStatusReducerの両方が作成されるため、私はこのエラーの原因がわからず、さらに問題を詳しく調べる方法も知らない。これは、テストの実行時にのみ表示されます。アプリを実行してもこの問題は表示されず、アプリは正常に動作します。

ので、ご質問は以下のとおりです。

• なぜこれは単なるテストで現れてますか？
• 問題の原因を調べるにはどうすればよいですか？

Answer 1

私の頭をキーボードから叩いた後、いくつかの手がかりを見つけました。

クイックフィックス：代わりdefaultのgameStateReducerの通常exportを作り、import { gameStateReducer } from // ...と他の場所でそれをインポートします。

Jestはいくつかのインポートを自動的に嘲笑してしまいます。この場合、Jesterはバグがあります。あるいは、react-create-appが提供していない設定が必要です。

Jestがそのエラーをログに記録する理由（関連するコードがテストでインポートされていないと考える）については、その内部の動作が原因であると考えられます。

.test.jsで終わるファイルのみと一致するnpm testスクリプトに--testPathPatternフラグを追加しても動作は変わらず、エラーは引き続き表示されます。

問題を調査する方法

：私は、エラーログを起こしたコードは（間接的に、それは例えばimportで、あったかもしれない）のテストであったか否かを考え出すことから始めました。これを否定した後、私はcombineReducersに渡された関数を嘲笑して、変更がエラーログの結果に影響を与えていることを確認した。単純にこれを追加する：

gameStatus: gameStatusReducer || (() =>()) 

は...すでにimportで、冗談/ babel-jestがそれをどのように扱うか間違っているものを意味し、問題を解決します。

さらにこの問題を調査する場合は、Jestを使用して独自のインストールを作成し、独自の設定を行い、Jestがアプリケーション全体をコンパイルしているかどうかを確認します。 react-create-appを使用する場合、Jestに設定オプションを渡すことは自明ではないようです。

幸運を祈る！

Answer 2

還元剤を組み合わせるには、それらをオブジェクトにマージしてcreateStoreに渡すのではなく、必ずimport { combineReducers } from 'redux';としてください。

例：

const appReducer = combineReducers({ 
     gameSettings: ..., 
     gameStatus: ..., 
    }); 

    const store = createStore(
    appReducer, 
    enhancer, 
); 

Answer 3

はまた、このエラーを持っていましたが、活字体を使用しました。

私たちのエラーがNo reducer provided for key "favourites"であったとします。

このエラーの原因となったテストでは、そのレデューサーのファイルからインターフェイスをインポートしました。このインターフェイスは、明らかにファイルを実行してエクスポートを生成します。

私たちのfavouritesレデューサーはReduxストアをインポートして、状態の別のビットをスイッチケースの一部としてクエリします。

何らかの理由で、私たちがStore.getState().someOtherReducersStateにアクセスする行をコメントアウトすると、エラーがなくなります。

したがって、エラー出力を引き起こすテストファイル内の修正は単にjest.mock('../route/to/Store');でした。