Redux Warnung erscheint nur in Tests

Question

Ich habe ein Tic Tac Toe Spiel mit Reaktivverdünnung erstellt.

Ich verwende create-react-app.

Ich habe folgendes Geschäft:

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; 

Alles läuft wie ich erwarte. Mit Ausnahme, wenn ich Tests leite (npm test) folgende in der Konsole angezeigt:

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. 

In den wenigen Tests, die ich habe, teste ich nicht einmal den Laden. Ich denke, das kommt beim Kompilieren des Codes auf. Ich habe versucht, console.log(gameStatusReducer) vor der Root Reducer Linie setzen. Es zeigt, dass gameStatusReducer nicht definiert ist.

Da sowohl der gameSettingsReducer als auch der gameStatusReducer auf sehr ähnliche Weise erstellt werden, weiß ich nicht, woher dieser Fehler kommt und weiß nicht, wie ich das Problem weiter untersuchen soll. Dies zeigt sich nur beim Ausführen der Tests. Das Ausführen der App zeigt dieses Problem nicht an und die App funktioniert wie erwartet.

Also, die Fragen sind:

• Warum ist dies nur in den Tests angezeigt?
• Wie untersucht man, woher das Problem kommt?

Answer 1

Nach einer Menge hämmern mein Kopf gegen die Tastatur, habe ich einige Hinweise gefunden.

Quick Fix: ein normales export für gameStateReducer macht statt ein default und importieren Sie es an anderer Stelle mit import { gameStateReducer } from // ....

Jest macht automatisch Spott von einigen Importen, und anscheinend ist es in diesem Fall fehlerhaft, oder es erwartet irgendeine Art von Konfiguration, die react-create-app nicht zur Verfügung gestellt hat.

Warum Jest diesen Fehler sogar protokolliert (wenn man bedenkt, dass der relevante Code in keinem der Tests importiert wird), nehme ich an, dass dies auf seine inneren Abläufe zurückzuführen ist.

Unterstützung ist dies die folgenden Nachweise: Hinzufügen eines --testPathPattern Flag an den npm test Skript passend nur in .test.js Endung Dateien nicht das Verhalten ändern und die Fehler immer noch angezeigt wird.

Wie das Problem zu untersuchen: ich herauszufinden begann, ob der Code das Fehlerprotokoll in den Tests war verursacht oder nicht (indirekt könnte es gewesen sein, mit einem import zum Beispiel). Nachdem ich dies ausgeschlossen hatte, fing ich an, die Funktionen, die an combineReducers übergeben wurden, zu verspotten, um sicherzustellen, dass alle Änderungen das Ergebnis des Fehlerprotokolls beeinflussten, und das taten sie auch. Ganz einfach und fügte hinzu:

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

... löst schon die Frage, was falsch bedeutet, was ist der import ist und wie Jest/babel-jest behandelt sie.

Wenn ich dieses Problem weiter untersuchen würde, würde ich meine eigene Installation mit Jest erstellen und meine eigene Konfiguration bereitstellen, um zu sehen, ob Jest immer noch die gesamte Anwendung kompiliert. Es scheint nicht trivial Konfigurationsoptionen zu Jest zu übergeben, wenn Sie react-create-app verwenden.

Viel Glück!

Answer 2

zu reduzieren, sicher import { combineReducers } from 'redux'; statt juste zusammenführen sie in ein Objekt und geben es an den createStore.

Ex:

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

    const store = createStore(
    appReducer, 
    enhancer, 
); 

Answer 3

hatte auch diesen Fehler, aber mit Typoskript.

Zum Zwecke der Argumentation sagen wir, unser Fehler war No reducer provided for key "favourites".

Für den Test, der diesen Fehler verursacht, haben wir eine Schnittstelle aus der Datei des Reduzierers importiert, die wiederum die Datei ausführt, um die Exporte zu generieren.

Unser favourites Reducer importiert unseren Redux-Speicher, um ein weiteres Bit des Status als Teil eines seiner Switch-Fälle abzufragen.

Aus irgendeinem Grund wurde die Zeile, in der wir auf Store.getState().someOtherReducersState zugreifen, auskommentiert.

Also die Lösung war einfach zu jest.mock('../route/to/Store'); in der Testdatei verursacht die Fehlerausgabe.