Skip to content

Instantly share code, notes, and snippets.

@kevinnio
Last active June 17, 2019 03:18
Show Gist options
  • Save kevinnio/d0f07502d7be5f13fe49baffd1ade7b2 to your computer and use it in GitHub Desktop.
Save kevinnio/d0f07502d7be5f13fe49baffd1ade7b2 to your computer and use it in GitHub Desktop.

Revisions

  1. kevinnio revised this gist Jun 17, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion adding-jest-to-a-babel-6-project.md
    Original 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

    First, let's start by installing Jest `23.6.0` since that's the last version which supports Babel 6.
    Let's start by installing Jest `23.6.0` since that's the last version which supports Babel 6.

    ```bash
    # Using yarn
  2. kevinnio revised this gist Jun 17, 2019. 1 changed file with 9 additions and 11 deletions.
    20 changes: 9 additions & 11 deletions adding-jest-to-a-babel-6-project.md
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,12 @@
    # 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.
    **[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 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.
    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.
    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` :
    Now, we need to add these lines at the bottom of our `.babelrc` file:

    ```javascript
    {
    // Original .babelrc content...

    "env": {
    "test": {
    "presets": [
    "env"
    '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 `.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.
    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 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.
    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!
    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!
  3. kevinnio revised this gist Jun 16, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion adding-jest-to-a-babel-6-project.md
    Original 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.
    **[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

  4. kevinnio revised this gist Jun 16, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions adding-jest-to-a-babel-6-project.md
    Original 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
    // ...
    // Original .babelrc content...

    "env": {
    "test": {
    "presets": [
  5. kevinnio revised this gist Jun 16, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion adding-jest-to-a-babel-6-project.md
    Original 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'
    "env"
    // Add any additional presets your project requires
    // like "react" for example.
    ],
  6. kevinnio revised this gist Jun 16, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion adding-jest-to-a-babel-6-project.md
    Original 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` :

    ```json
    ```javascript
    {
    // Original .babelrc content
    // ...
  7. kevinnio created this gist Jun 16, 2019.
    50 changes: 50 additions & 0 deletions adding-jest-to-a-babel-6-project.md
    Original 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!