Last active
June 17, 2019 03:18
-
-
Save kevinnio/d0f07502d7be5f13fe49baffd1ade7b2 to your computer and use it in GitHub Desktop.
Revisions
-
kevinnio revised this gist
Jun 17, 2019 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -6,7 +6,7 @@ Jest requires [Babel](https://babeljs.io/) to transpile Javascript code that doe ## Alternative setup Let's start by installing Jest `23.6.0` since that's the last version which supports Babel 6. ```bash # Using yarn -
kevinnio revised this gist
Jun 17, 2019 . 1 changed file with 9 additions and 11 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,14 +1,12 @@ **[Jest](https://jestjs.io)** is an amazing testing tool developed by the folks at Facebook and maintained by a vast community of developers. Is one of the best ways to write and run Javascript tests. It [should be really easy to setup](https://jestjs.io/docs/en/getting-started) starting from scratch, but what if we want to integrate it into an already initialized project? One which uses Babel 6 and already has a `.babelrc` file. ## The problem with Babel 6 Jest requires [Babel](https://babeljs.io/) to transpile Javascript code that doesn't normally run on NodeJS environments, most commonly **[ES2015 modules](https://medium.com/@atilafassina/es2015-modules-101-d9977dc4d4c7)**. Problem is Jest dropped support for Babel 6 since `24.0.0` in favour of Babel 7, which introduces a lot of changes to how devs work with Babel. Jest recommends upgrading if your project is still on Babel 6, but not all projects can upgrade quickly. This blog post is for those kinds of projects. ## Alternative setup First, let's start by installing Jest `23.6.0` since that's the last version which supports Babel 6. ```bash # Using yarn @@ -18,16 +16,16 @@ yarn add --dev [email protected] npm install --save-dev [email protected] ``` Now, we need to add these lines at the bottom of our `.babelrc` file: ```javascript { // Original .babelrc content... "env": { "test": { "presets": [ 'env' // Add any additional presets your project requires // like "react" for example. ], @@ -41,10 +39,10 @@ Now, we need to add these lines at the bottom of our `.babelrc` : } ``` Jest sets `NODE_ENV` to `test` while it runs and these lines need to be present inside `.babelrc` so it can know your specific Babel configuration. You may need to use a slightly different syntax if you're using `.babelrc.js` or `babel.config.js` files, but the main idea remains the same. Finally, you can run `jest --init` to create your Jest config file. After that, you can customize it to your project needs. The options inside the file are well documented but if you need additional info check out [the official configuration docs](https://jestjs.io/docs/en/configuration). From now on, you can start writing and running tests the standard Jest way. Hopefully, this post will save you precious time and some headaches. If you have any suggestions or comments, please leave them down below! Happy coding! -
kevinnio revised this gist
Jun 16, 2019 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ # Adding Jest to a Babel 6 project **[Jest](https://jestjs.io)** is an amazing testing tool developed by the folks at Facebook and mantained by a vast community of developers. Is one of the best ways to write and run Javascript tests. It [should be really easy to setup](https://jestjs.io/docs/en/getting-started) starting from scratch, but what if we want to integrate it into an already initialized project? One which uses Babel 6 and already has a `.babelrc` file. ## The problem with Babel 6 -
kevinnio revised this gist
Jun 16, 2019 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -22,8 +22,8 @@ Now, we need to add these lines at the bottom of our `.babelrc` : ```javascript { // Original .babelrc content... "env": { "test": { "presets": [ -
kevinnio revised this gist
Jun 16, 2019 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -27,7 +27,7 @@ Now, we need to add these lines at the bottom of our `.babelrc` : "env": { "test": { "presets": [ "env" // Add any additional presets your project requires // like "react" for example. ], -
kevinnio revised this gist
Jun 16, 2019 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -20,7 +20,7 @@ npm install --save-dev [email protected] Now, we need to add these lines at the bottom of our `.babelrc` : ```javascript { // Original .babelrc content // ... -
kevinnio created this gist
Jun 16, 2019 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,50 @@ # Adding Jest to a Babel 6 project **[Jest](https://jestjs.io)** is an amazing testing tool developed by the folks at Facebook and mantained by a vast community of developers. Is one of the best ways to write and run Javascript tests. It [should be really easy to setup](https://jestjs.io/docs/en/getting-started) starting from scratch, but what if we want to integrate it into an already initialized project? One which uses Babel 6 and already has a `.babelrc`file. ## The problem with Babel 6 Jest requires [Babel](https://babeljs.io/) to transpile Javascript code that doesn't normally run on NodeJS environments, most commonly **[ES2015 modules](https://medium.com/@atilafassina/es2015-modules-101-d9977dc4d4c7)**. Problem is Jest dropped support for Babel 6 since `24.0.0` in favor of Babel 7, which introduces a lot of changes to how devs work with Babel. Jest recommends upgrading if your project is still on Babel 6, but not all projects can upgrade quickly. This blog post is for those kinds of projects. ## Alternative setup First, let's start by installing Jest `23.6.0`, since that's the last version which supports Babel 6. ```bash # Using yarn yarn add --dev [email protected] # Using npm npm install --save-dev [email protected] ``` Now, we need to add these lines at the bottom of our `.babelrc` : ```json { // Original .babelrc content // ... "env": { "test": { "presets": [ 'env' // Add any additional presets your project requires // like "react" for example. ], "plugins": [ // Add any Babel plugins your project needs. // Most of the time you can remove this section entirely // if you already defined your plugins somewhere up the file. ] } } } ``` Jest sets `NODE_ENV` to `test` while it runs and these lines need to be present `.babelrc` so it can know your specific Babel configuration. You may need to use a slightly different syntax if you're using `.babelrc.js` or `babel.config.js` files, but the main idea remains the same. Finally, you can run `jest --init` to create your first Jest config file. After the file is created you can customize it to your project needs. The options inside the file are well documented but if you need more insight refer to [the official configuration docs](https://jestjs.io/docs/en/configuration). From now on, you can start writting and running tests. Hopefully this post will save you precious time and some headaches. If you have any suggestions or comments, please leave them down below! Happy coding!