Having trouble running Jest tests: `SyntaxError: Unexpected token <`

Question

I know this may have been posted before, but I'm really stuck as to why my tests aren't working in my React project. Here's my .babelrc file:

{
    "presets": ["react", "es2015", "stage-0"],

    "plugins": [
        "transform-runtime",
        "add-module-exports",
        "transform-decorators-legacy"
    ],

    "env": {
        "development": {
            "plugins": [
                "typecheck",
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-catch-errors",
                        "imports": ["react", "redbox-react"]
                    }]
                }]
            ]
        },
        "test": {
            "presets": ["es2015", "react", "stage-0"],
            "plugins": [
                "transform-runtime",
                "add-module-exports",
                "transform-decorators-legacy"
            ]
        }
    }
}

and here is my Jest setting in package.json

  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json"
    ],
    "moduleNameMapper": {
      "ExampleTest": "<rootDir>/app/pages/ExampleTest.js"
    },
    "moduleDirectories": [
      "app",
      "node_modules"
    ]
  },

The error that I'm getting is Test suite failed to run... SyntaxError: Unexpected token <.

From what I can tell about that error, the files that it is trying to run have JSX/ES6 code in them... and it doesn't know how to transpile that? Which is weird because I've told it to do just that in the .babelrc. I have also provided Jest with the appropriate moduleDirectories.

Any help would be greatly appreciated.

YoliE · Accepted Answer · 2017-07-21 21:34:34Z

the last comma , in your JSON is wrong. It should look like:

{"root":{
    "presets": ["react", "es2015", "stage-0"],

    "plugins": [
        "transform-runtime",
        "add-module-exports",
        "transform-decorators-legacy"
    ],

    "env": {
        "development": {
            "plugins": [
                "typecheck",
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-catch-errors",
                        "imports": ["react", "redbox-react"]
                    }]
                }]
            ]
        },
        "test": {
            "presets": ["es2015", "react", "stage-0"],
            "plugins": [
                "transform-runtime",
                "add-module-exports",
                "transform-decorators-legacy"
            ]
        }
    }
}}

Danny Delott · Accepted Answer · 2017-07-21 21:16:06Z

0

Make sure you import React in your test file.

answered Jul 21, 2017 at 21:16

Danny Delott

7,0284 gold badges38 silver badges60 bronze badges

1 Comment

a53-416 Over a year ago

I am already doing this at the top of my test file. import React from 'react'

PlanetGazer8360 · Accepted Answer · 2017-07-21 21:23:31Z

0

If your package.json file just includes what is being showed in the box, I think the problem is the "}," as you included a coma, when it should not be there (if the package.json file just includes what is displayed in the box), because it is the last line of code, and there is no more JSON code following it. Hope it is useful!

answered Jul 21, 2017 at 21:23

PlanetGazer8360

114 bronze badges

Comments

a53-416 · Accepted Answer · 2017-07-23 13:51:58Z

0

The answer, if anyone curious, is to configure Jest to gracefully handle asset files such as stylesheets and images. Usually, these files aren't particularly useful in tests so we can safely mock them out. To learn more, see Using with Webpack in the Jest documentation.

answered Jul 23, 2017 at 13:51

a53-416

4,0956 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

Having trouble running Jest tests: `SyntaxError: Unexpected token <`

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related