Create-react-app: Can't Modify Jest Transform Patterns

[jamesmfriedman]

In a perfect world, everyone ships ES5 code.

In reality, they don't.

If you have a 3rd party module that relies on es modules, Jest will happily fail.

I understand the strong stance against configuration, but this one seems like a no brainer since it makes it too easy to render the testing framework useless.

Steps to Reproduce

(Write your steps here:)

1. Create react app
2. import an es6 module
3. Write a basic test
4. Watch it fail

There seems to have been a lot of effort put in to making sure people could override / extend some things and not others. Can't you just shallow merge the config keys and honor whatever the user has passed in?

As a small addendum, even though moduleNameNapper is not in the supported list, it does indeed work, although you have to copy over the original declaration manually.

https://github.com/facebook/create-react-app/blob/45bc6280d109b7e353ffaa497a0352c9d040c36d/packages/react-scripts/scripts/utils/createJestConfig.js#L72

[mrmckeb]

I've encountered this myself, with a package we were using internally across a few projects. Webpack is fine with ESM, but you need CJS for Jest.

I'd recommend reaching out to the person that built that module and asking them to fix it, as this is an issue others will encounter too. Some people may not be as fast to understand the root cause, so this definitely should be addressed.

You could also consider creating a mock for the module, if you don't actually need it to be in your tests.

I don't think this is something that needs to be _fixed_ in CRA (because this module should be updated), but I do agree that we can always do more to allow custom configuration.

[jamesmfriedman]

Getting everyone to fix their external modules seems like a bit more work than adding a few lines to the jest config :). I’ll create a PR for this for reference.

Another larger pipe dream would be to get Jest to speak ES6 but I’m assuming there are some complexities there that I don’t understand.

Thanks for the quick reply

[mrmckeb]

I understand @jamesmfriedman, but I also feel we need to ensure that authors of modules follow standards. The module field should be used for ESM, and main for CJS. This ensures compatibility, whilst offering ESM for those that can consume it.

I'm sure the jest team are working on this too, as it'll become more of a problem in future.

I'll close this off as you're working on a PR, and we'll keep looking at ways to be more flexible with configs.

[jamesmfriedman]

Lol, I meant a PR for this repo that shows how easy it is to fix this issue 🤓

[jamesmfriedman]

Ok @mrmckeb, PR is up :)