React testing with Jest and Enzyme (in Symfony) got “Syntax Error: Unexpected token import”
up vote
2
down vote
favorite
im using React in Symfony, installed Jest and Enzyme to test the React components, but when trying to run tests with yarn test or even yarn test --no-cache got following error:
here is my package.json file:
"devDependencies":
"@symfony/webpack-encore": "^0.20.1",
"babel-jest": "^23.2.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.2.0",
"jest-enzyme": "^6.0.2",
"webpack-notifier": "^1.6.0"
,
"dependencies":
"axios": "^0.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"rc-datetime-picker": "^1.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
,
"scripts":
"test": "jest",
"test:watch": "jest --watch"
,
"jest":
"transform":
"^.+\.js$": "babel-jest"
,
"setupTestFrameworkScriptFile": "./assets/js/__tests__/setup/setupEnzyme.js",
"testPathIgnorePatterns": [
"./assets/js/__tests__/setup/"
]
and my webpack.config.js(encore) file:
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('app', './assets/js/index.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
.enableReactPreset()
// first, install any presets you want to use (e.g. yarn add babel-preset-es2017)
// then, modify the default Babel configuration
.configureBabel(function(babelConfig)
// add additional plugins
babelConfig.plugins.push('transform-object-rest-spread');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
)
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
// allow sass/scss files to be processed
// .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();and finally my setupEnzyme.js:
const Enzyme = require('enzyme');
// this is where we reference the adapter package we installed
// earlier
const EnzymeAdapter = require('enzyme-adapter-react-16');
// This sets up the adapter to be used by Enzyme
Enzyme.configure( adapter: new EnzymeAdapter() );I tried all of the available solutions but none of them worked for me!
any idea about it? :(
reactjs jestjs babel enzyme symfony4
edited Nov 10 at 10:05
skyboyer
3,09611028
asked Jul 3 at 8:19
PiML
1163
add a comment |
up vote
2
down vote
favorite
im using React in Symfony, installed Jest and Enzyme to test the React components, but when trying to run tests with yarn test or even yarn test --no-cache got following error:
here is my package.json file:
"devDependencies":
"@symfony/webpack-encore": "^0.20.1",
"babel-jest": "^23.2.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.2.0",
"jest-enzyme": "^6.0.2",
"webpack-notifier": "^1.6.0"
,
"dependencies":
"axios": "^0.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"rc-datetime-picker": "^1.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
,
"scripts":
"test": "jest",
"test:watch": "jest --watch"
,
"jest":
"transform":
"^.+\.js$": "babel-jest"
,
"setupTestFrameworkScriptFile": "./assets/js/__tests__/setup/setupEnzyme.js",
"testPathIgnorePatterns": [
"./assets/js/__tests__/setup/"
]
and my webpack.config.js(encore) file:
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('app', './assets/js/index.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
.enableReactPreset()
// first, install any presets you want to use (e.g. yarn add babel-preset-es2017)
// then, modify the default Babel configuration
.configureBabel(function(babelConfig)
// add additional plugins
babelConfig.plugins.push('transform-object-rest-spread');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
)
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
// allow sass/scss files to be processed
// .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();and finally my setupEnzyme.js:
const Enzyme = require('enzyme');
// this is where we reference the adapter package we installed
// earlier
const EnzymeAdapter = require('enzyme-adapter-react-16');
// This sets up the adapter to be used by Enzyme
Enzyme.configure( adapter: new EnzymeAdapter() );I tried all of the available solutions but none of them worked for me!
any idea about it? :(
reactjs jestjs babel enzyme symfony4
edited Nov 10 at 10:05
skyboyer
3,09611028
asked Jul 3 at 8:19
PiML
1163
Looks like u are missing something in.babelrcfile. Can you share that file once?
– Harkirat Saluja
Jul 3 at 8:34
There is no .babelrc file, cause it does included in Encore in webpack.config.js (the configureBabel funcrtion in the included snippet above)
– PiML
Jul 3 at 8:44
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
im using React in Symfony, installed Jest and Enzyme to test the React components, but when trying to run tests with yarn test or even yarn test --no-cache got following error:
here is my package.json file:
"devDependencies":
"@symfony/webpack-encore": "^0.20.1",
"babel-jest": "^23.2.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.2.0",
"jest-enzyme": "^6.0.2",
"webpack-notifier": "^1.6.0"
,
"dependencies":
"axios": "^0.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"rc-datetime-picker": "^1.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
,
"scripts":
"test": "jest",
"test:watch": "jest --watch"
,
"jest":
"transform":
"^.+\.js$": "babel-jest"
,
"setupTestFrameworkScriptFile": "./assets/js/__tests__/setup/setupEnzyme.js",
"testPathIgnorePatterns": [
"./assets/js/__tests__/setup/"
]
and my webpack.config.js(encore) file:
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('app', './assets/js/index.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
.enableReactPreset()
// first, install any presets you want to use (e.g. yarn add babel-preset-es2017)
// then, modify the default Babel configuration
.configureBabel(function(babelConfig)
// add additional plugins
babelConfig.plugins.push('transform-object-rest-spread');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
)
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
// allow sass/scss files to be processed
// .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();and finally my setupEnzyme.js:
const Enzyme = require('enzyme');
// this is where we reference the adapter package we installed
// earlier
const EnzymeAdapter = require('enzyme-adapter-react-16');
// This sets up the adapter to be used by Enzyme
Enzyme.configure( adapter: new EnzymeAdapter() );I tried all of the available solutions but none of them worked for me!
any idea about it? :(
reactjs jestjs babel enzyme symfony4
edited Nov 10 at 10:05
skyboyer
3,09611028
asked Jul 3 at 8:19
PiML
1163
im using React in Symfony, installed Jest and Enzyme to test the React components, but when trying to run tests with yarn test or even yarn test --no-cache got following error:
here is my package.json file:
"devDependencies":
"@symfony/webpack-encore": "^0.20.1",
"babel-jest": "^23.2.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.2.0",
"jest-enzyme": "^6.0.2",
"webpack-notifier": "^1.6.0"
,
"dependencies":
"axios": "^0.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"rc-datetime-picker": "^1.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
,
"scripts":
"test": "jest",
"test:watch": "jest --watch"
,
"jest":
"transform":
"^.+\.js$": "babel-jest"
,
"setupTestFrameworkScriptFile": "./assets/js/__tests__/setup/setupEnzyme.js",
"testPathIgnorePatterns": [
"./assets/js/__tests__/setup/"
]
and my webpack.config.js(encore) file:
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('app', './assets/js/index.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
.enableReactPreset()
// first, install any presets you want to use (e.g. yarn add babel-preset-es2017)
// then, modify the default Babel configuration
.configureBabel(function(babelConfig)
// add additional plugins
babelConfig.plugins.push('transform-object-rest-spread');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
)
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
// allow sass/scss files to be processed
// .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();and finally my setupEnzyme.js:
const Enzyme = require('enzyme');
// this is where we reference the adapter package we installed
// earlier
const EnzymeAdapter = require('enzyme-adapter-react-16');
// This sets up the adapter to be used by Enzyme
Enzyme.configure( adapter: new EnzymeAdapter() );I tried all of the available solutions but none of them worked for me!
any idea about it? :(
"devDependencies":
"@symfony/webpack-encore": "^0.20.1",
"babel-jest": "^23.2.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.2.0",
"jest-enzyme": "^6.0.2",
"webpack-notifier": "^1.6.0"
,
"dependencies":
"axios": "^0.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"rc-datetime-picker": "^1.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
,
"scripts":
"test": "jest",
"test:watch": "jest --watch"
,
"jest":
"transform":
"^.+\.js$": "babel-jest"
,
"setupTestFrameworkScriptFile": "./assets/js/__tests__/setup/setupEnzyme.js",
"testPathIgnorePatterns": [
"./assets/js/__tests__/setup/"
]
"devDependencies":
"@symfony/webpack-encore": "^0.20.1",
"babel-jest": "^23.2.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.2.0",
"jest-enzyme": "^6.0.2",
"webpack-notifier": "^1.6.0"
,
"dependencies":
"axios": "^0.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"rc-datetime-picker": "^1.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
,
"scripts":
"test": "jest",
"test:watch": "jest --watch"
,
"jest":
"transform":
"^.+\.js$": "babel-jest"
,
"setupTestFrameworkScriptFile": "./assets/js/__tests__/setup/setupEnzyme.js",
"testPathIgnorePatterns": [
"./assets/js/__tests__/setup/"
]
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('app', './assets/js/index.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
.enableReactPreset()
// first, install any presets you want to use (e.g. yarn add babel-preset-es2017)
// then, modify the default Babel configuration
.configureBabel(function(babelConfig)
// add additional plugins
babelConfig.plugins.push('transform-object-rest-spread');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
)
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
// allow sass/scss files to be processed
// .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('app', './assets/js/index.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
.enableReactPreset()
// first, install any presets you want to use (e.g. yarn add babel-preset-es2017)
// then, modify the default Babel configuration
.configureBabel(function(babelConfig)
// add additional plugins
babelConfig.plugins.push('transform-object-rest-spread');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
)
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
// allow sass/scss files to be processed
// .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();const Enzyme = require('enzyme');
// this is where we reference the adapter package we installed
// earlier
const EnzymeAdapter = require('enzyme-adapter-react-16');
// This sets up the adapter to be used by Enzyme
Enzyme.configure( adapter: new EnzymeAdapter() );const Enzyme = require('enzyme');
// this is where we reference the adapter package we installed
// earlier
const EnzymeAdapter = require('enzyme-adapter-react-16');
// This sets up the adapter to be used by Enzyme
Enzyme.configure( adapter: new EnzymeAdapter() );reactjs jestjs babel enzyme symfony4
reactjs jestjs babel enzyme symfony4
edited Nov 10 at 10:05
skyboyer
3,09611028
asked Jul 3 at 8:19
PiML
1163
edited Nov 10 at 10:05
skyboyer
3,09611028
asked Jul 3 at 8:19
PiML
1163
edited Nov 10 at 10:05
skyboyer
3,09611028
edited Nov 10 at 10:05
skyboyer
3,09611028
edited Nov 10 at 10:05
skyboyer
3,09611028
3,09611028
asked Jul 3 at 8:19
PiML
1163
asked Jul 3 at 8:19
PiML
1163
asked Jul 3 at 8:19
PiML
1163
1163
Looks like u are missing something in.babelrcfile. Can you share that file once?
– Harkirat Saluja
Jul 3 at 8:34
There is no .babelrc file, cause it does included in Encore in webpack.config.js (the configureBabel funcrtion in the included snippet above)
– PiML
Jul 3 at 8:44
add a comment |
Looks like u are missing something in.babelrcfile. Can you share that file once?
– Harkirat Saluja
Jul 3 at 8:34
There is no .babelrc file, cause it does included in Encore in webpack.config.js (the configureBabel funcrtion in the included snippet above)
– PiML
Jul 3 at 8:44
Looks like u are missing something in
.babelrc file. Can you share that file once?– Harkirat Saluja
Jul 3 at 8:34
Looks like u are missing something in
.babelrc file. Can you share that file once?– Harkirat Saluja
Jul 3 at 8:34
There is no .babelrc file, cause it does included in Encore in webpack.config.js (the configureBabel funcrtion in the included snippet above)
– PiML
Jul 3 at 8:44
There is no .babelrc file, cause it does included in Encore in webpack.config.js (the configureBabel funcrtion in the included snippet above)
– PiML
Jul 3 at 8:44
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51149772%2freact-testing-with-jest-and-enzyme-in-symfony-got-syntax-error-unexpected-to%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Looks like u are missing something in
.babelrcfile. Can you share that file once?– Harkirat Saluja
Jul 3 at 8:34
There is no .babelrc file, cause it does included in Encore in webpack.config.js (the configureBabel funcrtion in the included snippet above)
– PiML
Jul 3 at 8:44