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:
enter image description here



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? :(










share|improve this question























  • 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














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:
enter image description here



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? :(










share|improve this question























  • 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












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:
enter image description here



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? :(










share|improve this question















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:
enter image description here



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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 10:05









skyboyer

3,09611028




3,09611028










asked Jul 3 at 8:19









PiML

1163




1163











  • 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
















  • 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















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

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















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






























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














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





















































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







Popular posts from this blog

How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

Syphilis

Darth Vader #20