Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add example using babel 7 #6983

Merged
merged 3 commits into from
Sep 18, 2018
Merged

add example using babel 7 #6983

merged 3 commits into from
Sep 18, 2018

Conversation

SimenB
Copy link
Member

@SimenB SimenB commented Sep 15, 2018

Summary

A lot of people are struggling with running Babel 7 using Jest. This adds a minimal example (all you have to do is install the bridge package for babel-core, but it doesn't seem like stating that in the docs is enough).

For fun, I added the typescript preset as well as just module transformation.

Closes #6913.

Test plan

Green CI.

@yvele
Copy link

yvele commented Sep 17, 2018

Hey nice idea 👍

But why not keep it simple and remove typescript preset please.. or make 2 separate examples

Also I don't understand why jest is not working smoothly with babel 7, it used to be so simple.

Can you add an explanation? Like what exactly is "babel-core": "7.0.0-bridge.0"

Thanks

PS: Related to #6982

@yvele
Copy link

yvele commented Sep 17, 2018

Small remark: Also for readability thinks like *.(js|ts) are better than *.(j|t)s. Keep simplicity in kind.. even more when writing examples 😉

@SimenB
Copy link
Member Author

SimenB commented Sep 17, 2018

But why not keep it simple and remove typescript preset please.. or make 2 separate examples

Fair enough. The typescript example will change with #6949, so I can remove that part

Can you add an explanation? Like what exactly is "babel-core": "7.0.0-bridge.0"

You can read through #4557, which lead to the creation of that module 🙂

Small remark: Also for readability thinks like *.(js|ts) are better than *.(j|t)s

Very good feedback, thank you! Will do 🙂

@SimenB
Copy link
Member Author

SimenB commented Sep 17, 2018

@yvele the example is quite a bit slimmer now, any other comments?

@yvele
Copy link

yvele commented Sep 17, 2018

@SimenB Looks pretty straightforward 👍

@thymikee
Copy link
Collaborator

That's cool! But I think it would be nice to make an explicit note that when you want to transpile node_modules, you likely need to use babel.config.js instead of .babelrc. Plus a link to Babel configuration docs maybe

@SimenB
Copy link
Member Author

SimenB commented Sep 18, 2018

in the docs, or readme of the example?

@thymikee
Copy link
Collaborator

In the docs, folks are not looking up examples that often.

@SimenB
Copy link
Member Author

SimenB commented Sep 18, 2018

done

Copy link
Collaborator

@thymikee thymikee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍Would be cool to include it in all versioned docs, as some are missing

@@ -91,6 +91,10 @@ yarn add --dev babel-jest babel-core regenerator-runtime
> ```bash
> yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime
> ```
>
> You will need to use babel.config.js in order to transpile `node_modules`. See https://babeljs.io/docs/en/next/config-files for more information.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we wrap babel.config.js with backticks for visibility?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done!

@SimenB
Copy link
Member Author

SimenB commented Sep 18, 2018

Would be cool to include it in all versioned docs, as some are missing

Nope, not every version has that document. See the netlify deployment - every versioned doc includes this 🙂

@thymikee
Copy link
Collaborator

Missed that! I was redirected to Jest website from deploy preview while using search XD

@SimenB SimenB merged commit 2af1c62 into jestjs:master Sep 18, 2018
@SimenB SimenB deleted the babel-7-example branch September 18, 2018 09:49
@matheusdallrosa
Copy link

matheusdallrosa commented Oct 5, 2018

@SimenB In my case Jest only uses Babel if a create a file with the name: .babel.config.js . If i create a file with the name: babel.config.js it doesn't work. It is supposed to work like that?

Here is my package.json:

{
  "name": "learn-jest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "jest": "^23.6.0",
    "regenerator-runtime": "^0.12.1"
  },
  "babel": {
    "presets": [
      "./.babel.config.js"
    ]
  }
}

And here is my .babel.config.js:

const isTest = String(process.env.NODE_ENV) === "test";

module.exports = function() {
  return {
    presets: [
      [
        "@babel/preset-env",
        {
          modules: isTest ? "commonjs" : false
        }
      ]
    ]
  };
};

when i run npm run test it only works if i'm using .babel.config.js instead of babel.config.js

@github-actions
Copy link

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 12, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Requires Babel "^7.0.0-0", but was loaded with "6.26.3".
5 participants