We Keep Coding

Jest throw error SyntaxError: Unexpected identifier

Jest config is:
module.exports = {
transformIgnorePatterns: ['<rootDir>/node_modules/(?!(#react-native|react-native)/)'],
preset: 'react-native',
transform: {
'^.+\\.js$': require.resolve('react-native/jest/preprocessor.js'),
},
};
In babel config there is presets: ['module:metro-react-native-babel-preset'],
In package I have
"jest": "^24.9.0",
"react": "^16.14.0",
"react-native": "^0.64.0",
Versions of React and React-native are strict because of youi-tv
If I run jest I get an error:
SyntaxError: Unexpected identifier
node_modules/#react-native/polyfills/error-guard.js:14
type ErrorHandler = (error: mixed, isFatal: boolean) => void;
Also if I use ts-jest with configuration I can get such an error in my *.test.tsx
SyntaxError: Unexpected token '<'
Please any advice

For me the problem was that I used more than one string in the "transformIgnorePatterns" on the jest configuration in the package.json.

Setup Jest + React testing library using NextJS in TypeScript -- error setting upp jest.config.js

I am trying to set up Jest with a NextJS application, currently in jest.config.js:
module.exports = {
testPathIgnorePatterns: ["<rootDir>/.next/", "node_modules/"],
setupFilesAfterEnv: ["<rootDir>/__tests__/setupTests.tsx"],
transform: {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
}
};
In my setupTests.tsx I have:
import "#testing-library/jest-dom/extend-expect";
However when I run npm run test I get the following error:
Module identity-obj-proxy in the transform option was not found.
<rootDir> is: ....
If I remove the line in jest.config.js I get:
Test suite failed to run
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".
globals.css:2
body {
^
SyntaxError: Unexpected token '{'
> 5 | import "../styles/globals.css";
What configuration should I use for the css and scss files?
** EDIT **
I made sure that identity-obj-proxy is in my devDependencies however, now I get an error:
Test suite failed to run
Test suite failed to run
TypeError: Jest: a transform must export a `process` function.
> 5 | import "../styles/globals.css";
| ^
6 | import React from "react";

You need to install identity-obj-proxy. Run >>> yarn add -D identity-obj-proxy

Try this:
Create a file style-mock.js with this content
module.exports = {};
Specify it inside the moduleNameMapper field of jest config
moduleNameMapper: {
'^.+\\.(css|less)$': '<rootDir>/jest-config/style-mock.js'
}
With this setup, it will mock all css import, hope it helps

spread syntax doesn't work with node 6.10

i am playing with spread syntax on node/browser.
console.log([{ name: "herry" }, { age: "10" }].reduce((acc, cur) => ({...cur,...acc})))
1) with nodejs v6.10,
SyntaxError: Unexpected token ...
2) Chrome 50
SyntaxError: Unexpected token ...
3) babel stage-0, it's working well.
I am just wandering why it's not working on node 6.10 since it's all green for spread op.
http://node.green/

To get this working:
yarn add -D babel-plugin-transform-object-rest-spread # (or the npm equivalent)
Then add "transform-object-rest-spread" to your .babelrc plugins e.g.
{
"presets": ["es2015"],
"plugins": ["transform-object-rest-spread"]
}

Uncaught SyntaxError: Unexpected token export

I have used create-react-app for my project. I am getting an error of
Uncaught SyntaxError: Unexpected token export
The error is in this code
export const ENGLISH = {
lang: 'en',
messages: {
'nav.translatedMessage': 'Social',
}
};
I tried installing babel-preset-es2015 and babel-preset-stage-0. Also i included the babel dict/object in package.json as
"babel": {
"presets": [
"es2015",
"stage-0"
]
},
I am still getting an error.

I got my answer on README.md of create-react-app. There it says
You may create subdirectories inside src. For faster rebuilds, only
files inside src are processed by Webpack. You need to put any
JS and CSS files inside src, or Webpack won’t see them.

I think its because of the comma
export const ENGLISH = {
lang: 'en',
messages: {
'nav.translatedMessage': 'Social'
}
};
Try doing this !

How to separate source file from all vendors in webpack?

I want to have two files app.bundle.js and vendors.js where app.bundle.js contains only the code I wrote. Is it possible?
Here is my webpack.config.js file now
const dependencies = _.keys(packageConfig["dependencies"])
export default {
entry: {
vendors: dependencies,
app: [
'webpack-hot-middleware/client',
'./src/js/entry.js'
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
publicPath: '/'
},
...
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
...
But it does not work. I always had an error when compiling because some modules are not found. I've tried to list all dependencies manually, but in such case I have third party code in my app.bundle.js. So is it even possible?
UPDATE
I've take a look into the compiled app.bundle.js and saw code from hot replacement module and webpack itself. So the real question is - is this a default code that have to be placed inside each webpack module?
UPDATE
My first line in the entry file is import 'babel-core/polyfill' so I want module babel-core to be in vendors.js. And have this error
ERROR in ./~/babel-core/~/regenerator/lib/visit.js
Module not found: Error: Cannot resolve module 'fs' in /Users/vitalii/Documents/coding/timerrrs/node_modules/babel-core/node_modules/regenerator/lib
# ./~/babel-core/~/regenerator/lib/visit.js 12:9-22
ERROR in ./~/babel-core/~/regexpu/data/iu-mappings.json
Module parse failed: /Users/vitalii/Documents/coding/timerrrs/node_modules/babel-core/node_modules/regexpu/data/iu-mappings.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "75": 8490,
| "83": 383,
| "107": 8490,
# ./~/babel-core/~/regexpu/rewrite-pattern.js 4:17-51
ERROR in ./~/babel-core/~/globals/globals.json
Module parse failed: /Users/vitalii/Documents/coding/timerrrs/node_modules/babel-core/node_modules/globals/globals.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "builtin": {
| "Array": false,
| "ArrayBuffer": false,
# ./~/babel-core/~/globals/index.js 1:17-42
ERROR in ./~/babel-core/~/regenerator/~/recast/main.js
Module not found: Error: Cannot resolve module 'fs' in /Users/vitalii/Documents/coding/timerrrs/node_modules/babel-core/node_modules/regenerator/node_modules/recast
# ./~/babel-core/~/regenerator/~/recast/main.js 18:4-17