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

jest (babel) fails if using ES6 imports #658

Closed
jounii opened this issue Oct 10, 2019 · 5 comments
Closed

jest (babel) fails if using ES6 imports #658

jounii opened this issue Oct 10, 2019 · 5 comments
Labels

Comments

@jounii
Copy link

jounii commented Oct 10, 2019

Environment

devDependencies:

"@haul-bundler/babel-preset-react-native": "^0.13.2",
"@haul-bundler/cli": "^0.13.1",
"@haul-bundler/preset-0.60": "^0.13.0",
"jest": "^24.9.0",

Node v12.4.0

Description

After changing babel.config.js preset @haul-bundler/babel-preset-react-native jest tests don't support import syntax anymore. If switching back to metro-react-native-babel-preset jest works again.

Trying to figure out what setting is triggering this, but not expert in babel configuration.

Getting errors such as

    import fetch, { Headers } from 'node-fetch';
           ^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
@zamotany
Copy link
Contributor

zamotany commented Oct 10, 2019

@jounii
Add this workaround to your Babel config:

overrides: [
  {
    test: /__tests__/,
    plugins: [['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }]]
  }
]

@zamotany zamotany added the bug label Oct 11, 2019
@jounii
Copy link
Author

jounii commented Oct 11, 2019

Thanks. Your example pointed to right direction, however it was not enough because the jest is running and parsing all sort of files. Only common here was that it is running inside node.

So not sure if it is correct way, but this seems to work for now at least:

const isNode = () => typeof process === 'object'
    overrides: [
        {
            test: isNode,
            plugins: [
                ['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }]
            ]
        }
    ]

@zamotany
Copy link
Contributor

zamotany commented Oct 11, 2019

@jounii Looks a bit hacky, you can alternatively try this:

env: {
  test: {
    plugins: [['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }]]
  }
}

It should work for every file if it's being run by Jest, which sets process.env.NODE_ENV to test.

@jounii
Copy link
Author

jounii commented Oct 11, 2019

Thanks, that looks better solution and works too. Not familiar with babel config that well, but makes sense now how it works.

@zamotany
Copy link
Contributor

In next release of @haul-bundler/babel-preset-react-native CommonJS transform will be added automatically in when NODE_ENV === 'test', like above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants