Add Babel Integration with Jest

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

Jest will default to utilize babel when your node_modules contains babel-jest. Depending on your environment this may already be the case! In this quick lesson, find out why that is and how to ensure that continues to work.

[00:00] In this project, we're configuring Babel to transpile our code using this Babel RC file. We're running our code using Node 6 which has support for most of ES 6. But here in our code, we're using ES 6 modules here and a stage two feature which are both unavailable in Node 6.

[00:18] The same would apply also if you were using React in JSX or any additional Babel plugins. For just to understand how to transpile our code, we need to have Babel Jest installed.

[00:28] Incidentally, it's actually already been installed for us. We can verify that by running NPM alas Babel-Jest. You'll see it's being installed because it's a dependency of Jest runtime which is a dependency of Jest ELI which is a dependency of our project.

[00:45] Just runtime is responsible for instrumenting our code for code coverage. The way it does that is with a Babel plugin. That's why it includes Babel Jest. Because I'm using NPM 3 to install these dependencies, this particular dependency gets loaded into the root level of my known modules directory. Because of this, Jest will default to utilize Babel as a preprocessor.

[01:06] We can go ahead and run the test script now, and everything will work perfectly even though I'm using these features that aren't supported in Node 6. Despite this, it's still recommended to explicitly add Babel Jest as a dev dependency in your package JSON to ensure that people using older versions of NPM don't have any trouble.

[01:23] We'll go ahead and do that now by running NPM install, save dev, Babel Jest. With that installed, we'll verify that in our package JSON. It has been added to our dev dependencies as 15.00We're all set to have Jest use Babel to transpile our test.

Jim Jeffers
Jim Jeffers
~ 6 years ago

Just out of curiosity. What plugin are you using to launch the console within atom? Also, what plugin / add on are you using to customize the side bar with custom icons for your babel file, etc.?

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

You can find answers to those questions and more here