Related
I'm trying to debug vuejs with vscode, I've tried a lot of tutorials/answers and could not make it work.
So I decided to ask a question here, maybe nowadays there's a right way to make it work.
I've created a project that it's identical with the one I want to debug, so I can post prints here.
The project structure is:
Here is the unbound breakpoint:
Sources Tab in chrome looks like:
More detailed chrome sources tab:
vue.config.js:
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
configureWebpack: {
devtool: "source-map"
},
transpileDependencies: true
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"**/src/*": "${webRoot}/src/*",
},
"preLaunchTask": "vuejs: start"
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "vuejs: start",
"type": "npm",
"script": "serve",
"isBackground": true,
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
UPDATE
#A.D asked if I've tried to use keyword
debugger;
Here is the results:
Ps: I don't want to start writing debugger in my code...
But with that i could see that the debugger file is pointing to:
C:\Users\vinic\Desktop\test\test\js\webpack:\test\src\components\HelloWorld.vue
But the component src is actualy located in
C:\Users\vinic\Desktop\test\test\src\components\HelloWorld.vue
Why my breakpoints are not bounding?
Try to change webRoot param and leave as in the documentation, you need to include src after ${workspaceFolder}.
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
UPDATE:
After some research, i found this issue.
There is a change in this version that you used.
They changed the compiler and this affected the way to debugger.
You can use the "2.6.11" works in this version.
Note: This change affected later versions.
Appearently there are some problems with the webpack of vue versions above 2.6.11
Git hub Thread
Reddit Thread
After some discussions with #Tonielton Mota i noticed that, if I fully remove the property name from package.json and package-lock.json it works.
Here are the files that are working:
launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
},
"preLaunchTask": "vuejs: start"
}
]
}
package.json
{
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I created a simple app a few weeks ago using create-react-app almost immediately I started getting this error in VSCode about it not being happy about something Babel related...which I ignored. My app works, I'm able to build and deploy to Heroku. And ESLint is also working. But the error keeps popping up in VSCode which has lead me down this rabbit hole of Babel and ESLint nightmares.
The error I was getting was regarding babel-eslint which I actually didn't have installed despite it being the parser named in my .eslintrc.json config. This is what my package.json file looked like prior to me making any changes:
{
"name": "new-rails-react-project",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.13.13",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
And this is what my .eslintrc.json file looked like:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true }
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
Since babel-eslint is deprecated I added #babel/eslint-parser and cannot for the life of me figure out how to make this work. Here are my current related config files:
package.json
"name": "ne-campground-reviews",
"private": true,
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.14.5",
"#babel/preset-react": "^7.13.13",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"lightbox2": "^2.11.3",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/eslint-parser": "^7.14.7",
"#babel/eslint-plugin": "^7.14.5",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
.eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks", "#babel"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true },
"requireConfigFile": false,
"babelOptions": {
"presets": ["#babel/preset-react"]
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
And this is babel.config.js although I don't know if this file is still needed and/or configured correctly
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
},
modules: 'commonjs'
},
'#babel/preset-react'
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
[
'#babel/preset-react',
{
development: isDevelopmentEnv || isTestEnv,
useBuiltIns: true
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
],
isProductionEnv && [
'babel-plugin-transform-react-remove-prop-types',
{
removeImport: true
}
]
].filter(Boolean)
}
}
This error is what's currently popping up on things like import and module
Parsing error: Cannot find module '#babel/preset-react'
Require stack:
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/config/files/plugins.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/config/files/index.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/index.js
I am trying to compile Vue.js based front-end application, but each time I do try to run it, I receive following error message:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
^
Invalid CSS after "": expected 1 selector or at-rule, was "import './ProjectM"
in /app/src/components/ProjectMenuButton/ProjectMenuButton.vue (line 1, column 1)
I used to see this error before whenever I was including .css files with wrong path delivered.
The problem is that there literally has not been any .css file included into this file:
/app/src/components/ProjectMenuButton/ProjectMenuButton.vue:
<template>
<button :class="buttonClass" #click="changed()">
<h3>{{ this.ProjectMenuButton.text }}</h3>
</button>
</template>
<script>
export default {
name: "ProjectMenuButton",
props: {
ProjectMenuButton: {
type: Object,
default: () => ({
id: '',
text: '',
page: '',
class: 'btn'
})
},
ProjectMenuButtonClass: {
type: Object,
default: () => ({
class: ''
})
}
},
computed: {
buttonClass() {
if(typeof this.ProjectMenuButtonClass.class === undefined
|| this.ProjectMenuButtonClass.class === undefined)
return `ui basic button menu-button`;
else
return `ui basic button menu-button ${this.ProjectMenuButtonClass.class}`;
},
},
methods: {
changed: function(event) {
store.commit('current_menu', this.ProjectMenuButton.page);
}
}
};
</script>
I've tried different commands, like:
npm install --save-dev webpack
npm rebuild node-sass
But none of above worked.
Moreover, I do start Vue.js with following docker-container configuration:
frontend:
image: node:10-alpine
command: npm run serve
volumes:
- ./.env:/app/.env:ro
- ./frontend:/app
working_dir: /app
restart: on-failure
postgres:
image: postgres:10-alpine
volumes:
- postgres_data:/var/lib/postgresql/data
env_file: .env
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm i && vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"register-service-worker": "^1.5.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue-raven": "^1.0.0",
"vue-analytics": "^5.16.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.1",
"#vue/cli-plugin-eslint": "^3.0.1",
"#vue/cli-plugin-pwa": "^3.0.1",
"#vue/cli-plugin-unit-jest": "^3.0.1",
"#vue/cli-service": "^3.0.1",
"#vue/eslint-config-standard": "^3.0.1",
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-jest": "^23.4.2",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
]
}
}
npm v3.10.10 node v6.11.0 eslint v4.2.0
You can pull the repo here. Just npm install then npm run lint
I'm trying to use the following export statement (comment works, but is ugly):
containers/index.js
export MainContainer from './Main/MainContainer'
// export { default as MainContainer } from './Main/MainContainer'
config/routes.js
import React from 'react'
import { Route, HashRouter, browserHistory } from 'react-router-dom'
import { MainContainer } from '../containers'
const routes = (
<HashRouter history={browserHistory}>
<Route path="/" component={MainContainer} />
</HashRouter>
)
export default routes
I installed the following package:
npm install babel-eslint#next --save-dev
.eslintrc
{
parser: "babel-eslint",
en: {
es6: true,
browser: true
},
extends: ["eslint:recommended", "plugin:react/recommended", "standard"],
plugins: [
"react"
]
}
.eslintrc.json
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"off",
"always"
]
}
}
However even with that installed I still get the error about the MainContainer when I npm run lint
package.json
"scripts": {
"start": "webpack-dev-server",
"production": "webpack -p",
"lint": "eslint app/.; exit 0",
"fix": "eslint --fix app/.; exit 0"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-eslint": "^8.0.0-alpha.13",
"babel-loader": "^7.1.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.4",
"eslint": "^4.2.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-standard": "^3.0.1",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1"
}
folder structure
Figured it out! I needed to edit my .eslintrc.json file, not the .eslintrc
https://github.com/babel/babel-eslint/issues/6
{
...
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
...
}
It seems babel transform works in my testcase code, but es6 syntax in node_modules does not.
Error
environment
npm 4.5
MacOS Sierra
jest config
{
"preset": "react-native",
"globals": {
"__DEV__": true
},
"transform": {
"^.+\\.js$": "babel-jest"
}
}
babelrc
{
"env": {
"test": {
"presets": ["react-native"],
"plugins": [["import", { "libraryName": "antd-mobile" }]]
},
"development": {
"presets": ["react-native"],
"plugins": [["import", { "libraryName": "antd-mobile" }]]
},
"production": {
}
}
}
testcase
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import Index from '../index.ios.js';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});
package.json
{
"private": true,
"scripts": {
"web": "roadhog server",
"build-web": "cross-env NODE_ENV=production roadhog build",
"start": "react-native start",
"ios": "cross-env NODE_ENV=development node themes/theme.rn.config.js && react-native run-ios",
"android": "cross-env NODE_ENV=development node theme/theme.rn.config.js && react-native run-android",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint",
"test": "cross-env NODE_ENV=test jest --config .jest.config.json --no-cache"
},
"engines": {
"install-node": "6.9.2"
},
"theme": "./themes/theme.web.config.js",
"dependencies": {
"antd-mobile": "^1.0.8",
"babel-runtime": "^6.9.2",
"dva": "^1.2.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"rc-form": "^1.3.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-native": "0.42.3",
"react-native-chart": "^1.0.8-beta",
"react-native-gesture-password": "^0.2.0",
"react-native-scrollable-tab-view": "^0.7.4",
"react-native-smart-gesture-password": "^2.1.0",
"react-navigation": "^1.0.0-beta.7",
"recharts": "^0.21.2",
"socket.io-client": "^1.7.3"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "^19.0.0",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.1.1",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-react-native": "^1.9.1",
"cross-env": "^4.0.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.20.2",
"husky": "^0.13.3",
"jest": "^19.0.2",
"less-vars-to-js": "^1.1.2",
"postcss-pxtorem": "^4.0.0",
"react-test-renderer": "15.4.2",
"redbox-react": "^1.3.2",
"roadhog": "^0.6.0-beta1"
}
}
debug message
jest version = 19.0.2
test framework = jasmine2
config = {
"automock": false,
"bail": false,
"browser": false,
"cacheDirectory": "/var/folders/h3/bfmnzb_j3zg3pdffgps1w3vh0000gn/T/jest",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"json",
"text",
"lcov",
"clover"
],
"expand": false,
"globals": {
"__DEV__": true
},
"haste": {
"defaultPlatform": "ios",
"platforms": [
"android",
"ios",
"native"
],
"providesModuleNodeModules": [
"react-native"
]
},
"moduleDirectories": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"jsx",
"node"
],
"moduleNameMapper": [
[
"^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$",
"RelativeImageStub"
],
[
"^React$",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react"
]
],
"modulePathIgnorePatterns": [
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/Libraries/react-native/",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/packager/"
],
"noStackTrace": false,
"notify": false,
"preset": "react-native",
"resetMocks": false,
"resetModules": false,
"roots": [
"/Users/erickim/Documents/Develop/react/glfm"
],
"snapshotSerializers": [],
"testEnvironment": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-environment-node/build/index.js",
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testRegex": "",
"testResultsProcessor": null,
"testURL": "about:blank",
"timers": "real",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
],
"useStderr": false,
"verbose": null,
"watch": false,
"setupFiles": [
"/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-polyfill/lib/index.js",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/jest/setup.js"
],
"transform": [
[
"^.+\\.js$",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-jest/build/index.js"
]
],
"rootDir": "/Users/erickim/Documents/Develop/react/glfm",
"name": "005c8bf9b4d78dfa0bb0e32c0c55b0fb",
"testRunner": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-jasmine2/build/index.js",
"cache": false,
"watchman": true
}
I figured it out. By default jest doesn't transform ES6 js code from node_modules. In my case, the package react-navigation module need to be translated. So I added transformIgnorePatterns to my jest configuration and everything worked:
{
"preset": "react-native",
"setupFiles": ["./test/setup.js"],
"globals": {
"__DEV__": true
},
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
]
}
https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization
The problem is that node doesn't understand ES6 modules and JEST is node process, so using import inside your test throw this error. Instead of babel we specifically tell Webpack to transcompile ES6 modules.So, we can fix this error by telling babel that when we are in testing scenario please combile ES6 modules by using below babel configuration settings
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
you can download this babel plugin by npm
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
Hopefully this will fix your problem.