Environment
#angular/cli#1.0.0
karma-phantomjs-launcher#1.0.4
node#6.9.4
npm#3.10.10
Issue
I've just added a service to my project which imports a function from a node_module library. Now, when I try to run my tests I get the following output.
SyntaxError: Unexpected token 'const'
at webpack:///~/print.js/src/js/print.js:4:0 <- src/test.ts:21436
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
SyntaxError: Unexpected token 'const'
at webpack:///~/print.js/src/js/print.js:4:0 <- src/test.ts:21436
A sample service looks like this
import {Injectable} from '#angular/core';
import printjs from 'print.js/src';
#Injectable()
export class PrintService {
constructor() {}
testPrint(url: string): void {
printjs(url);
}
}
I get this issue when I run
ng test --browsers PhantomJS
My tsconfig.json and src/tsconfig.spec.json have the target set to 'es5' which seems to be the most common cause of this issue.
I have read a number of posts including the following but haven't found anything that has worked. Is there anything else I can do?
SyntaxError: Unexpected token 'const' for testing.es5.js
https://github.com/angular/angular-cli/issues/5185
Having same issue also read many post but no luck !
Then i use babel. it take your code and make it compatible to your browser.
This link may help...
click here
Related
I get an error when I start testing the application:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
...
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/mmvs/Desktop/ReactNative/node_modules/react-navigation/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from '#react-navigation/core';
How to solve this error?
You need to add moduleNameMapper in package.json
look at this link : https://jestjs.io/docs/en/webpack#handling-static-assets
I'm using Poi, #poi/plugin-vue-static and typeface-nunito-sans to generate a static app using Vue. The problem is the build fails in a Syntax Error:
project/node_modules/typeface-nunito-sans/index.css:2
#font-face {
^
SyntaxError: Invalid or unexpected token
The whole app works correctly in dev server though. Is this because of the static site generation? How can I fix it?
Relevant code in main.ts:
// Client-side only libraries
import 'typeface-nunito-sans';
Fixed this by adding process.client check:
if (process.client) {
require('typeface-nunito-sans');
}
This prevents CSS from being processed in server-side code 👍
After using #react-native-community/async-storage and transpile it with the following npm command in my react-native environment.
"test": "NODE_ENV=test ./node_modules/.bin/mocha --timeout 5000 --require #babel/register \"./src/shared/__tests__/**/*.spec.js\""
I did some research and in no vain. But I found it happens to Jest too.
jest test fails after installing react-native-async-storage
this is my babel.config.js
module.exports = {
env: {
production: {
},
test: {
presets: [
'#babel/preset-env'
],
},
},
};
I'm only testing non-jsx code only so #babel/preset-env seems to be working alright.
node_modules/#react-native-community/async-storage/lib/index.js:5
import AsyncStorage from './AsyncStorage';
^^^^^^^^^^^^
SyntaxError: Unexpected identifier
It seems like no one likes to answer jest newbie questions....
anyway, when starting to learn jest, I encountered some funny error messages that doesn't reflect the actual error. There are some possible situations a developer can consider.
You didn't to mock your module say A_module that is inside node_modules so one of the modules say B_modules inside A_modules uses a NativeModules from react so Jest cannot performa a test. Please look at stack trace or use a debugger to find out which one you prefer to mock.
Mock a module that uses NativeModules (similar to point 1, but more direct and concise )
You need to understand jest more thoroughly before you proceed. Reading documentation is good but jump to example when you think fit. especially check out the examples that you really need and read related ones. Many of the time, either your Babel setting or mocking methods is incorrect.
use jest.mock instead of jest.genMockFromModule. Why? there are some functions or init function that causes your test to crash at this statement. Because it calls NativeModules or something jest doesn't allow. use mock instead.
Solutions to this question: please refer to this most updated solution.
thanks
I am new to react and also wanted to use office react ui for one of our requirement i followed the git hub and able to use office ui react components in my components but while running my first test case for App.js it is giving me below error.
E:\net_react\my-new-app\ClientApp\node_modules\office-ui-fabric-react\lib\Fabric.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Fabric/index';
^^^^^^
SyntaxError: Unexpected token export
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object. (src/components/Login.js:13:592)
at Object. (src/components/Home.js:2:14)
And i have an import statement in my Login.js
import { Fabric } from '../../node_modules/office-ui-fabric-react/lib/Fabric';
The error is because your test harness does not support ES 6 modules (which is what is in lib in Fabric 6).
Try importing instead from office-ui-fabric-react/lib-commonjs/Fabric or office-ui-fabric-react (which has bundle size implications unless you're able to utilize Tree Shaking) or modify your test harness's module map to redirect lib/ imports into lib-commonjs.
Update
To elaborate on the answer above, the Fabric release notes has guidance for Jest configuration:
moduleNameMapper: {
"office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1"
}
I'm playing around with ES6 syntax and would like to build a small module in NPM, which uses another npm module (e.g. push-js) as a dependency. Currently, I'm using rollup to bundle and generate my distribution files.
I'm not sure what's the right way to include a dependency in order to use it in my own module. This is what I tried
import * as Push from 'push.js';
class _MyModule
{
Push.create("Go ahead, click this notification", {
});
}
Rollup triggers the following error on this code:
events.js:160
throw er; // Unhandled 'error' event
^
Error: Unexpected token
Am I doing something fundamentally wrong here?
You are close enough. However, at least in current transpilers (Babel and co.), CommonJS module exports are treated like default exports. Meaning, instead of importing all separate entities (import * as Push), you only have to import the default exports (import Push).
import Push from 'push.js';
class _MyModule
{
constructor() {
Push.create("Go ahead, click this notification", {
});
}
}
How the actual interoperability between CommonJS and ES Modules will be solved, is not yet finalized. See Axel Rauschmayr's blog post on the subject.