How to fix 'Invariant Violation' caused by cyclic dependencies in react-redux How to fix 'Invariant Violation' caused by cyclic dependencies in react-redux reactjs reactjs

How to fix 'Invariant Violation' caused by cyclic dependencies in react-redux


One way of fixing it would be to reorder the imports in your dashboard file:

export { Data } from "./Data" // actually used export { Dashboard } from "./Dashboard" // not used but still resolved

Web application will work in most cases because it will start resolving from your index.tsx file (or whatever your entry file name is) and go from there. Jest on the other hand starts from your test file and only resolves those imports (you can find a nice explanation why this happens here: https://railsware.com/blog/how-to-analyze-circular-dependencies-in-es6/).

We had similar problems in our projects and unfortunatelly except reordering imports and better structuring your files there is no other solution.

One "hack" that you can also do is to add:

import 'problematic_module'

to your jest setupFilesAfterEnv. That way module will be resolved before each test (but i recommend this only as a last resort).