Unable to configure Jest in my React App - reactjs

Question

I'm just starting with tests right now, trying to set up the Jest with my project, but it has been painful.. I am trying to do the React App tutorial, with the Webpack Tutorial, and I'm facing if this error:
C:\Users\myuser\Desktop\myapp\__tests__\Link.test.js:2
import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
at transformAndBuildScript (node_modules\jest-runtime\build\transform.js:320:12)
I'm using Node v7.5.0 and Webpack 2. I installed all the necessary dependencies and I also tried to sort with jest configuration, but it didn't sort my problem.
My package.json looks like this:
{
"name": "myapp",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"jest": {
"modulePaths": ["<rootDir>/src/"],
"moduleDirectories": ["node_modules"],
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"<rootDir>/(node_modules)/"
]
},
"scripts": {
"start": "webpack-dev-server --progress --watch",
"build": "webpack --progress",
"test": "jest --verbose"
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-jest": "^18.0.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
"css-loader": "^0.26.1",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jest": "^1.0.2",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.9.0",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.28.0",
"jest": "^18.1.0",
"jest-cli": "^19.0.2",
"node-sass": "^4.5.0",
"react-hot-loader": "3.0.0-beta.6",
"react-test-renderer": "^15.4.2",
"sass-loader": "^5.0.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.8",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"dependencies": {
"chart.js": "^2.5.0",
"classnames": "^2.2.5",
"file-loader": "^0.11.1",
"flexboxgrid": "^6.3.1",
"google-map-react": "^0.22.3",
"intl": "^1.2.5",
"intl-locales-supported": "^1.0.0",
"lodash": "^4.17.4",
"material-ui": "^0.17.0",
"moment": "^2.17.1",
"node-schedule": "^1.2.1",
"normalize.css": "^5.0.0",
"re-base": "^2.6.0",
"react": "^15.4.2",
"react-chartjs-2": "^2.0.5",
"react-dom": "^15.4.2",
"react-flexbox-grid": "^0.10.2",
"react-router-dom": "^4.0.0",
"react-scrollbar": "^0.5.1",
"react-tap-event-plugin": "^2.0.1",
"webpack": "^2.2.1"
}
}
My .babelrc file looks like this:
{
"presets": [
["es2015", {"modules": false}],
"stage-2",
"react"
],
"plugins": [
"react-hot-loader/babel"
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
I also set the environment to test, but it didn't make any effect.
My Webpack file looks like this:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const plugins = [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/index.html'),
inject: true,
favicon: path.resolve(__dirname, './src/images/favicon.ico'),
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('dev'),
},
}),
];
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./index.jsx',
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public'),
publicPath: '/',
},
context: path.resolve(__dirname, 'src'),
resolve: {
modules: [path.resolve(__dirname, './src'), path.resolve(__dirname, './node_modules')],
extensions: ['.js', '.jsx'],
},
devServer: {
hot: true,
port: 3000,
contentBase: path.resolve(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/',
},
module: {
rules: [
{
test: /(\.js|\.jsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: {
loader: 'eslint-loader',
options: {
failOnWarning: false,
failOnError: false,
},
},
},
{
test: /(\.js|\.jsx)$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
{
test: /(\.scss|\.css)$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
],
},
{
test: /\.(png|jpg|)$/,
use: ['url-loader?limit=200000'],
},
],
},
plugins: plugins,
};
Can someone help me with this issue? Thanks!