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?
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.
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.
The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.
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 /\.
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
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"
}
}
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",
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With