redux-observable: Duplicate actions in stream when used with redux-mock-store

Cross post from your StackOverflow question https://stackoverflow.com/questions/48045348/duplicate-actions-in-redux-observable-stream-when-used-with-redux-mock-store/48045589#48045589

redux-observable currently makes the assumption that the middleware function returned by createEpicMiddleware() won’t be called multiple times. redux-mock-store appears to call it every time you call mockStore. While this behavior is probably not officially documented, my gut tells me redux-observable should not be making this assumption. Similar libraries like redux-saga used to as well, but they might have stopped.

It’s not immediately clear why this has never been noticed before by anyone. I don’t see any notable changes to either library that would have introduced this recently. My best guess is that it didn’t have any perceivable side effect so no one noticed. e.g. your example doesn’t filter any actions or emit any, instead just always logging with .do().

I’m on holiday right now, so I can’t dig into this until later this week. Sorry! But you can work around it by creating a new epicMiddleware and calling configureMockStore for every test instead of reusing it. One example might be something like this:

const mockStore = (...args) => {
  const epicMiddleware = createEpicMiddleware(someEpic);
  const factory = configureMockStore([epicMiddleware]);
  return factory(...args);
};

Adjust to your needs; e.g. if you need to change the root epic.

I guess no one saw it because no one tests epics

Dunno if this was a joke, but this is very very not true lol 😄 I’ve seen a large number of projects testing epics this way or similar.

Separately, a growing number of people test individual epics directly by just calling them with their own ActionsObservable, not using redux or any middleware. e.g. https://redux-observable.js.org/docs/recipes/InjectingDependenciesIntoEpics.html This is how I recommend people test and what the docs will suggest when I have time to adjust the them to reflect it. There’s work being done with the rxjs TestScheduler as well in the next month or so.

Hi, just found this thread after a long debugging session. The custom mockStore function above works. Just so I understand, is this a suggested temporary workaround, and if so, what will the long-term solution look like?

const mockStore = (...args) => {
      const epicMiddleware = createEpicMiddleware(someEpic);
      const factory = configureMockStore([epicMiddleware]);
      return factory(...args);
};

This saved my day. I have been stuck whole day trying to figure out what was wrong with my redux store configuration. Thanks @jayphelps

With v1.x of this lib and v6.x of rxjs, the above workaround is now outdated. createEpicMiddleware no longer takes epic arguments as input and you must call epicMiddleware.run with those epic arguments after the store is instantiated. An updated version of this workaround looks like:

let epicMiddleware;
const mockStore = (...args) => {
    epicMiddleware = createEpicMiddleware();
    const factory = configureMockStore([myEpic]);
    return factory(...args);
};

... // in my spec
const store = mockStore(initialState);
epicMiddleware.run(myEpic)

Less intuitive than before, and more repetitive 😕

🎉 Happy New Year from France by the way 😃 🎉