add example using babel 7

[SimenB]

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]

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]

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]

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]

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

[yvele]

@SimenB Looks pretty straightforward 👍

[thymikee]

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]

in the docs, or readme of the example?

[thymikee]

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

[SimenB]

done

[thymikee]

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

[thymikee]

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

[SimenB]

done!

[SimenB]

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]

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

[matheusdallrosa]

@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]

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.