16

I have created a tic tac toe game with react redux.

I am using create-react-app.

I have the following store:

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;

Everything runs as I expect. Except for when I am running tests (npm test) the following appears in the console:

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 the few tests I have, I am not even testing the store. So I guess this comes up while compiling the code. I tried putting console.log(gameStatusReducer) before the root reducer line. It shows that gameStatusReducer is undefined.

Since both the gameSettingsReducer and the gameStatusReducer are created in very similar ways, I do not know where this error comes from and do not even know how to investigate the issue further. This only shows up when running the tests. Running the app does not show this problem and the app works as expected.

So, the questions are:

  • Why is this just showing up in the tests?
  • How to investigate where the problem is coming from?
4
  • Show us the code of ./reducers/gameStatus.js, it might be a problem there.
    – yogi
    Apr 12, 2017 at 16:46
  • Not sure if I should put it all this code in the question: github.com/zelite/tic-tac-toe/blob/master/src/reducers/… Like I said, the error only appears in the test. When running the app normaly in the browser, the reducer works properly.
    – zelite
    Apr 12, 2017 at 16:48
  • What test is it giving you issues? Is that the tree.test.js or the board.test.js? Apr 21, 2017 at 9:13
  • It does not matter which test. I use the npm test which will start up jest and run all tests. There you can tell it to focus on a subset of the tests. Regardless of which subset the "console.error" message gets printed in the terminal.
    – zelite
    Apr 21, 2017 at 9:16

5 Answers 5

23
+50

After a lot of banging my head against the keyboard, I've found some clues.

Quick fix: make a normal export for gameStateReducer instead of a default and import it elsewhere with import { gameStateReducer } from // ....

Jest does automatic mocking of some imports, and apparently it's buggy in this case, or it expects some sort of configuration that react-create-app hasn't provided.

As to why Jest is even logging that error (considering the relevant code is not imported in any of the tests), I suppose it's due to its inner workings.

Supporting this is the following evidence: adding a --testPathPattern flag to the npm test script matching only files ending in .test.js does not change the behaviour and the error still appears.

How to investigate the problem: I started by figuring out whether the code causing the error log was in the tests or not (indirectly it could have been, with an import for example). After ruling this out, I started mocking the functions passed to combineReducers to make sure any changes affected the outcome of the error log, and they did. Simply adding this:

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

...already solves the issue, which means what's wrong is the import and how Jest/babel-jest handles it.

If I were to investigate this issue further, I would create my own installation with Jest and provide my own configuration, to see if Jest still compiles the entire application. It seems non-trivial to pass configuration options to Jest if you use react-create-app.

Good luck!

1
  • 1
    I have just had this happen to me, and it started when I replaced my string-based action types with constants, and introduced a cross-reference to an object holding them to use in my reducer. So the actions file imported the reducer file (for selectors), and the reducer file imported the actions file (for action types), which resulted in "No reducer provided for key..." while running tests. The quickfix you suggested did not work for me, however the other solution did. I didn't like hacking the codebase to fix tests, so I ended up just moving all my action types definitions to another file.
    – zephi
    Mar 13, 2018 at 16:38
15

Also had this error, but using TypeScript.

For the sake of argument, let's say our error was No reducer provided for key "favourites".

For the test causing this error, we imported an interface from that reducer's file, which in turn obviously runs the file to generate the exports.

Our favourites reducer imports our Redux store to query another bit of the state as part of one of its switch cases.

For some reason, commenting out the line where we access Store.getState().someOtherReducersState made the error go away.

So the fix was to simply jest.mock('../route/to/Store'); in the test file causing the error output.

1
  • 2
    +1 - this got me on the right path. The issue for me was that fooTest.ts was importing from foo.ts was importing from app.ts which calls combineReducers. The fix was to add jest.mock("...app.ts") to fooTest
    – MisterEd
    Jun 13, 2018 at 17:25
2

I also had this error, same reasons as the comments above, but I fixed it in more sensible way:

Separate the module file into two files, one for the reducer and one for the actions (instead of one containing both)

0

In my case, it turns out there was a circular dependency in one of the modules (it was importing the whole state)

-3

to combine reducer, sure import { combineReducers } from 'redux'; instead of juste merging them into an object and giving it to the createStore.

Ex:

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

  const store = createStore(
    appReducer,
    enhancer,
  );

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.