Craco with jest 27 createTransformer and _cracoConfig undefined problem after updating from v4

[klougod]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @craco/craco@6.2.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@craco/craco/lib/features/jest/create-jest-babel-transform.js b/node_modules/@craco/craco/lib/features/jest/create-jest-babel-transform.js
index f4742b9..f732f43 100644
--- a/node_modules/@craco/craco/lib/features/jest/create-jest-babel-transform.js
+++ b/node_modules/@craco/craco/lib/features/jest/create-jest-babel-transform.js
@@ -53,7 +53,7 @@ function createJestBabelTransform(cracoConfig) {
             }
         }
     }
-    return babelJest.createTransformer(craBabelTransformer);
+    return babelJest.default.createTransformer(craBabelTransformer);
 }
 
 module.exports = {
diff --git a/node_modules/@craco/craco/lib/features/jest/jest-babel-transform.js b/node_modules/@craco/craco/lib/features/jest/jest-babel-transform.js
index 13adf42..7fbd9e9 100644
--- a/node_modules/@craco/craco/lib/features/jest/jest-babel-transform.js
+++ b/node_modules/@craco/craco/lib/features/jest/jest-babel-transform.js
@@ -9,7 +9,7 @@ module.exports = {
     ...createJestBabelTransform(),
     process(src, filename, config, transformOptions) {
         if (!jestBabelTransform) {
-            jestBabelTransform = createJestBabelTransform(config.globals._cracoConfig);
+            jestBabelTransform = createJestBabelTransform(config._cracoConfig);
         }
 
         return jestBabelTransform.process(src, filename, config, transformOptions);

This issue body was partially generated by patch-package.

[dilanx]

@klougod could you share more information about the issue you're having?

[klougod]

@klougod could you share more information about the issue you're having?

Sure,

I have a CRA ejected application, and after updating from craco v4 to craco v6 and the dependency of babel-jest being the version 27 broke all my tests. Version 24 to 26 wasn't working too but I thought it was due to the update, after updating to babel-jest 27 I got this errors:

Cannot read property createTransformer of undefined
and
Cannot read property _cracoConfig of undefined

An important detail is that everything else works, builds, development environment, etc. It was a problem only in tests.
I can send a PR to fix the issue since I fixed it in my node_modules.

Best regards

[dilanx]

Thanks @klougod. Feel free to submit a PR with your fix and I'll take a look.

[klougod]

Thanks @klougod. Feel free to submit a PR with your fix and I'll take a look.
Done!

#432

[ryuash01]

First time commenting but first, thank you for this project :D

Don't know if this is related but I was on @craco/craco": "^6.4.4 and had to downgrade back @craco/craco": "^6.4.3 because of these changes. Currently using Create React App (CRA) 4.* without ejecting

[dilanx]

Good to know, @ryuash01. Can you share the errors you received?

[ryuash01]

@dilanx

TypeError: Cannot read property 'createTransformer' of undefined

Basically the exact same error as this issue. Everything works fine until testing.
My repo was created yesterday using npx create-react-app app --use-npm --scripts-version 4.0.3 --template typescript so I still have the older version babel-jest. Downgrading back to @craco/craco": "^6.4.3 before the changes were made above fixes the error.

[AndrewCraswell]

I can confirm what @ryuash01 is saying, and our setups are the same. I was already on ^6.4.3, but since 6.4.4 was a minor change, it automatically was installed, and we started seeing 100% test failure. Downgrading and locking to version 6.4.3 fixed the issue.

One tip to others who try to downgrade, I did have to run jest with the --no-cache option after downgrading in order to clear the cache and start seeing passing tests. Tripped me up for a second.

[dilanx]

Good to know. In that case, I wonder what caused the original issue. Do different versions of babel-jest export their functions differently? Perhaps babel-jest 27 is only compatible with the newer versions of babel?

@klougod if you downgrade your version of babel, does it resolve the issue? If this seems to be a breaking change for older versions of CRA, I can undo these changes early next week in a new patch release.

What version of babel do you guys use @ryuash01 @AndrewCraswell?

[AndrewCraswell]

We're using create-react-app version 4.0.3. So whichever version they install I think

[dilanx]

I just checked out the v4.0.3 tag of create-react-app and looked at the package.json of react-scripts at that point in the history. It looks like babel-jest 26 is used here. Sorry for missing this!

I think the best option here is to release a new patch that resets the changes made in 6.4.4, which I can try to do right now.

As for @klougod and others that have this issue, I suspect that this issue occurred because you have an ejected CRA project and have updated babel-jest independently of CRA, so I think this issue might not relate to craco specifically and rather the version of babel-jest you're using. Craco is only really intended to be used with CRA projects that are not ejected anyways. Please let me know if there are any other issues.

[klougod]

@dilanx HI,

I've tried to downgrade the babel-jest to version 26 but then I got another issue related to compatible versions I think, I'm using the react-scripts v5 btw.
But somehow v7 alpha of craco works just thine with babel-jest 27 and react-scripts v5, you should revert the changes. To fix the issue for people in the same situation as I was, upgrading to craco 7 alpha solves it.

Thanks.

[dilanx]

@klougod okay that makes sense. That's my fault for forgetting to ask which version of react-scripts you were using. I had assumed that you were also on CRA 4 since you were using craco 6 (which does not support CRA 5).

I just released craco v6.4.5 which should be the same as v6.4.3 (if you unpublish a version with npm you're unable to use that version tag ever again so it's usually better to always increase the version). Please let me know if there are any other issues.