CODEWITHSUNDEEP
javascriptreactjstestingbabeljsjestjs
a53-416
a53-416

Reputation: 3935

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

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.

Upvotes: 0

Views: 866

Answers (4)

a53-416
a53-416

Reputation: 3935

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.

Upvotes: 0

YoliE
YoliE

Reputation: 9

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"
            ]
        }
    }
}}

Upvotes: 1

PlanetGazer8360
PlanetGazer8360

Reputation: 11

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!

Upvotes: 0

Danny Delott
Danny Delott

Reputation: 6988

Make sure you import React in your test file.

Upvotes: 0

Related Questions