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

SyntaxError: Unexpected token import, testing ES6 typescript components #4263

Closed
LiamKenneth opened this issue Aug 13, 2017 · 6 comments
Closed

Comments

@LiamKenneth
Copy link

LiamKenneth commented Aug 13, 2017

I've read the docs, read blog posts, read multiple stack posts and i can't find any solution that has worked for me.

 jest --no-cache
 FAIL  __test__\components\stats\stats.components.test.js
  ● Test suite failed to run
  ...\src\components\stats\stats.component.tsx:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filenam
e,global,jest){import * as React from 'react';
               ^^^^^^
    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../../AppData/Roaming/
npm/node_modules/jest/node_modules/jest-runtime/build/ScriptTransformer.js:289
:17)
      at Object.<anonymous> (__test__/components/stats/stats.components.test.j
s:3:13)

Jest docs for example about how to test react components makes it look like testing an ES6 component should just work. But doesn't for me and I have no idea if it's because my files are using typescript or not.

So I would like some help please, seems like a popular issue imo with no reliable solution.

More detail on my code and configs can be found on my stackoverflow post or if you prefer my repo is here

Thanks

@thymikee
Copy link
Collaborator

You have your answers on SO already.
Your babel config should rather look like this:

{
  "presets":  [["es2015", { "modules": false }], "react"],
  "env": {
  "test": {
      "presets":[
        "es2015",
         "stage-0",
        "react"],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "dynamic-import-node"
      ]
    }
  }
}

Normally you want babel not to compile imports, because Webpack understands that. But for tests, you need to compile modules to common js (which is the default of "es2015" preset)

@LiamKenneth
Copy link
Author

even with copying your example babel config I get the same Unexpected token import error, there has to be something else that's not right, the answers on SO also do not work for me

@thymikee
Copy link
Collaborator

have you tried running jest --no-cache or npm run test -- --no-cache?

@LiamKenneth
Copy link
Author

LiamKenneth commented Aug 13, 2017

Yeah I tried that too, I have seen jest --no-cache mentioned in a few places so pretty much using it every time i make a change. Still end up with the same error though.

@sidferreira
Copy link

I'm having this issue, but jest doesn't accept an array of presets anymore...

@github-actions
Copy link

This issue 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.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants