Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jest test fail: SyntaxError: Unexpected token <

Not sure where to look for this error.

Using Typescript with React, and Jest and Enzyme for unit testing.

Package.json sample:

"scripts": {
    "start": "node server.js",
    "bundle": "cross-env NODE_ENV=production webpack -p",
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  }

Running npm test results in:

FAIL src/components/Component.test.tsx

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                             ^

    SyntaxError: Unexpected token <

Edit: It appears to be happening the first place where i use require to load a static .svg file. Why can it not handle that? Is there a way to ignore throwing this error when using require?

like image 887
cbll Avatar asked Oct 17 '17 13:10

cbll


People also ask

How do I fix an unexpected token syntax error?

This error can occur for a number of reasons, but is typically caused by a typo or incorrect code. Luckily, the SyntaxError: Unexpected token error is relatively easy to fix. In most cases, the error can be resolved by checking the code for accuracy and correcting any mistakes.

How do I get rid of unexpected token error?

As you write your JavaScript application, the unexpected token error always occurs because JavaScript expected a specific syntax that's not fulfilled by your current code. You can generally fix the error by removing or adding a specific JavaScript language symbol to your code.

Why do I get unexpected token error?

The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.

What does Babel jest do?

Jest ships with one transformer out of the box – babel-jest . It will load your project's Babel configuration and transform any file matching the /\.


3 Answers

Jest doesn't use Webpack so it doesn't know how to load other file extensions than js/jsx. To add support for other extensions you need to write custom transformers. One of the transformers is a Typescript transformer which you have defined in your configuration in this fragment:

"transform": {
   "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},

Now you need to add transformer for svg files. Let's extend your jest config

"transform": {
       "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
       "^.+\\.svg$": "<rootDir>/svgTransform.js" 
    },

and create the svgTransform.js file in your root directory with the following content

module.exports = {
  process() {
    return { code: 'module.exports = {};' };
  },
  getCacheKey() {
    // The output is always the same.
    return 'svgTransform';
  },
};

Of course, it's a basic transformer that returns always the same value.

Link to the documentation: http://facebook.github.io/jest/docs/en/configuration.html#transform-object-string-string

like image 117
niba Avatar answered Nov 13 '22 14:11

niba


If you have used the @svgr/webpack module to allow webpack to handle importing svgs @svgr provides a page that goes over how to handle testing with Jest. Here

Copied for posterity.

/__mocks__/svgrMock.js

import * as React from 'react'
export default 'SvgrURL'
export const ReactComponent = 'div'

In package.json

"jest": {
  "moduleNameMapper": {
    "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
  }
}
like image 33
kalm42 Avatar answered Nov 13 '22 14:11

kalm42


You can use the npm package jest-transform-stub

In the Jest config file, add a transform like this:

"transform": {
  ...
  "^.+\\.svg$": "jest-transform-stub",
  ...
}

Same transform can be use for any asset file.
  ".+\\.(css|less|sass|scss|png|jpg|gif|ttf|woff|woff2|svg)$": "jest-transform-stub",

like image 1
tornord Avatar answered Nov 13 '22 12:11

tornord