Add example on how to configure Babel with other tools (Jest) without affecting Parcel

[ianlet]

After upgrading to Parcel 2.0, I started seeing warnings about babel presets while building/watching/serving my project. The solution, as documented on the website, was to remove those presets to let Parcel do the job.

But as I am using Jest, removing those presets break the tests. So after checking how to pass options to jest-babel transformers (see: https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object), I realized we could simply tell Jest to use another babel config instead of the default .babelrc.json.

I know this is not directly related to Parcel, but should we add a more detailed example under https://parceljs.org/languages/javascript/#usage-with-other-tools ?

If this is something we'd like to add to the doc, I can make a PR.

[devongovett]

Does telling Parcel not to use Babel as documented there not work for you? This is a better option because it means Parcel doesn't have to search for Babel configs at all which should speed up the build even more.

[ianlet]

At first I thought I could not because of additional plugins, but as I played a little bit more with the config I realized I could completely let Parcel handle the configuration.

But as I still need babel for my tests with Jest, I have to keep the configuration file somewhere. So what I wrote above might still be useful in order to remove the regular .babelrc.json and let Parcel use its own transpiler, but still being able to use an external tool such as Jest with jest-babel.

What do you think?

The documentation states that You may not be able to completely remove your Babel config but in this case this is not entirely true as we can tell jest-babel to look for another config file.

[andresmanikis]

I also think it would be great to include a section on how to configure Jest.
I'd include it under the React section.
I think Jest (and also React Testing Library) are widely used nowadays and having a section explaining how to use them would be very helpful.
I personally had to invest quite some time until I figured it out.

Another thing I'd include would be how to handle CSS modules once Jest is configured. Again, not part of Parcel but needs to be done for it to work.

I'm also happy to contribute to the documentation.