React-app-rewired: babel-jest can not be resolved with yarn workspaces and CRA 3.0.0

[Yegair]

I am having issues running tests after an update to CRA 3.0.0:

Cannot find module 'babel-jest'
at Object.<anonymous> (../../node_modules/react-app-rewired/scripts/utils/babelTransform.js:1:19)

I am going to investigate the problem and maybe create a PR if I find a solution.

It would be valuable to know if anyone else got these problems too.

[Yegair]

Tried it with the test-app of this repository and it works, so it is most likely being caused by some other dependency conflicts within my project which are not directly related to react-app-rewired.

But since the only thing I did was updating the react-scripts from 2.1.3 to 3.0.0 it might be interesting to other people what exactly caused this problem. Hence I will investigate further and write updates to this issue.

[dawnmist]

It might be a case that something react-scripts 2 depended on was pulling babel-jest in as a dependency, and react-scripts 3 doesn't have the same dependency anymore. In that case, you'd just need to explicitly add babel-jest to your devDependencies. I know that react-scripts moved up to jest 24.x, so possibly somewhere in the move the need for babel-jest got dropped/removed or something?

Thank you for continuing to test/debug the issue, and looking forward to seeing your feedback when you do track it down. :)

Edit: Nope, looks like react-scripts is still using babel-jest themselves: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/jest/babelTransform.js
And are listing it as a dependency: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json

Really dumb question (sorry, I have to ask) - you did re-run yarn install or npm install after the upgrade, didn't you? I'm assuming you did given the effort you're making to debug the issue...

[robcaldecottvelo]

I am seeing this as well, even after removing node_modules. We're using yarn workspaces so react-scripts is in the root node_modules folder. Simply adding babel-jest as a devDependency fixes it but it's still odd (as yarn list babel-jest was showing the package already installed.)

[Yegair]

Yes adding babel-jest directly fixes it. Maybe I am misunderstanding how modules are resolved, but I am a little surprised, that adding a dependency directly has different effects than having a transitive dependency (with the very same version). This might be because I am thinking in terms of Java/Maven/Gradle dependency resolution mechanisms too much. To be honest I don't know exactly how module resolution works under the hood.

I suspect that line 9 in rewireJestConfig may be the root of the problem (although there is no real error there):

  config.transform[key] = path.resolve(__dirname + '/babelTransform.js');

babelTransform.js is the one which requires babel-jest. Here only the path to babelTransform.js is written to some config object. Maybe Jest/Babel resolves modules a little differently and thus has problems resolving the dependency in a Yarn workspace setup.

[mkolodny]

To fix this, I had to make sure to install the same version of babel-jest that react-scripts requires. To find out what version of babel-jest your version of react-scripts requires, you can run npm ls babel-jest.