SyntaxError: Cannot use import statement outside a module using jest - node.js

I'm trying to start tests using Jest, but I'm not able to use "import", so how can I use import in Jest?
plus.js
function addTwo(num) {
return num + 2;
}
export { addTwo };
test.js
import { addTwo } from './plus';
test('adds 1 + 2 to equal 3', () => {
expect(addTwo(4)).toBe(6);
});
Error:
My package.json:
{
"name": "...",
"version": "1.0.0",
"title": "...",
"homepage": "http://...",
"devDependencies": {
"#babel/core": "7.12.3",
"babel-loader": "8.1.0",
"btoa": "1.2.1",
"chalk": "3.0.0",
"circular-dependency-plugin": "5.2.0",
"css-loader": "5.0.0",
"dp-grunt-contrib-copy": "0.4.4",
"eslint": "5.16.0",
"eslint-loader": "4.0.2",
"file-loader": "6.2.0",
"filemanager-plugin": "2.5.2",
"generate-json-webpack-plugin": "2.0.0",
"grunt": "1.1.0",
"grunt-contrib-clean": "0.7.0",
"grunt-contrib-compress": "1.6.0",
"grunt-contrib-concat": "1.0.1",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-cssmin": "1.0.2",
"grunt-cssjoin": "0.3.0",
"grunt-eslint": "21.1.0",
"grunt-exec": "3.0.0",
"grunt-jsmin-sourcemap": "1.10.0",
"grunt-terser": "0.1.0",
"grunt-writefile": "0.1.4",
"html-loader": "1.3.2",
"jest": "^26.6.3",
"jwt-decode": "3.0.0",
"mini-css-extract-plugin": "1.2.1",
"npm-run-all": "4.1.5",
"prettier": "2.1.2",
"prettier-webpack-plugin": "1.2.0",
"resize-observer-polyfill": "1.5.1",
"sass": "1.25.0",
"sass-loader": "10.0.4",
"sha1": "1.1.1",
"ssh2": "0.8.9",
"style-loader": "2.0.0",
"vue-virtual-scroller": "1.0.10",
"webpack": "5.3.1",
"webpack-cli": "3.3.12",
"xmlhttprequest": "1.8.0"
},
"dependencies": {
"inputmask": "5.0.0",
"jquery": "2.1.3",
"requirejs": "2.3.6",
"vue": "2.6.10",
"vue-i18n": "8.15.3",
"vuedraggable": "2.23.2"
},
"scripts": {
"build": "npm run dev && bash ./build.sh",
"lint": "npx eslint --fix --quiet .",
"prettier": "npx prettier --config ./.prettierrc.json --write ./**/*.{scss,js}",
"prod": "node node/compiler.js prod",
"dev": "node node/compiler.js dev",
"backup-log": "node node/logger.js",
"test": "jest"
}
}

The solution was install #babel/preset-env:
npm install --save-dev #babel/preset-env
Create a file babel.config.js
module.exports = {
presets: [['#babel/preset-env', {targets: {node: 'current'}}]],
};

Related

Jest SyntaxError: Unexpected token 'export' from node module

I've been having this issue with Jest. Jest is throwing an error pointing towards a dependency from within node_modules. Probably need to configure jest to support this syntax, because it can't parse it. But i'm not sure what for configurations.
I've tried to add transformIgnorePatterns in the jest.config.ts file with no luck,
"node_modules/(?!(geotiff)/)"
Any help would be highly appreciated!
Details:
/Users/Documents/Project/node_modules/quick-lru/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export default class QuickLRU extends Map {
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-cli/node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (node_modules/geotiff/dist-module/source/blockedsource.js:1:1)
This is the jest.config.ts
// jest.config.ts
import type {Config} from "#jest/types";
const config : Config.InitialOptions = {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!**/*.d.ts"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
],
"testMatch": [
"<rootDir>/src/**/*.(test).{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "node",
"testEnvironmentOptions": {
"url" : "http://localhost"
},
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
},
"transformIgnorePatterns": [
"node_modules/(?!(geotiff)/)"
],
"moduleFileExtensions": [
"web.ts",
"ts",
"web.tsx",
"tsx",
"web.js",
"js",
"web.jsx",
"jsx",
"json",
"node",
"mjs"
],
"globals": {
"ts-jest": {
"tsconfig": "./tsconfig.test.json"
}
},
"modulePaths": [
"<rootDir>/src/"
]
};
this is the package.json file
{
"name": "Project",
"version": "1",
"private": true,
"homepage": ".",
"files": [
"build/**/*"
],
"engines": {
"node": ">=16.14.0",
"npm": ">=8.11.0"
},
"repository": {
"type": "git",
"url": "ssh://Project},
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
},
"scripts": {
"build-css": "sass --style=compressed -I ./src -I ./node_modules src/:src/",
"watch-css": "npm run build-css && sass -I ./src -I ./node_modules src/:/src --watch",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"debug": "npm-run-all -p --inspect=9227 watch-css start-js",
"prebuild": "cross-env CI=true npm run test --watchAll=false",
"build": "npm run build-css && node scripts/build.js",
"postbuild": "node scripts/zip.js",
"build-test": "npm run build-css node scripts/build.js",
"serve-build": "npm run serve -s build",
"test": "node scripts/test.js --env=jsdom",
"prepublishOnly": "npm run build",
"preversion": "CI=true npm run test",
"postinstall": "patch-package",
"lint": "./node_modules/.bin/ESLint -c .eslintrc.js -o ./lint.log"
},
"devDependencies": {
"#babel/cli": "^7.18.6",
"#babel/core": "^7.18.6",
"#babel/preset-env": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/runtime": "^7.18.6",
"#svgr/webpack": "^6.2.1",
"#turf/turf": "^6.4.0",
"#types/classnames": "^2.3.1",
"#types/enzyme": "^3.10.12",
"#types/jest": "^28.1.3",
"#types/node": "^18.0.0",
"#types/react": "^17.0.39",
"#types/react-autocomplete": "^1.8.6",
"#types/react-autosuggest": "^10.1.5",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-highlight": "^0.12.5",
"#types/react-router-dom": "^5.3.3",
"#types/uuid": "^8.3.4",
"#typescript-eslint/parser": "^5.30.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"adm-zip": "^0.5.9",
"autoprefixer": "10.4.7",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.27.2",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^28.1.1",
"babel-loader": "^8.2.2",
"babel-preset-react-app": "10.0.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"chalk": "5.0.1",
"classnames": "~2.2.6",
"core-js": "^3.6.5",
"cross-env": "^5.2.1",
"css-loader": "^6.7.1",
"dotenv": "16.0.1",
"enzyme": "^3.11.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jsdoc": "^39.3.3",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-react": "^7.22.0",
"eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.1.1",
"fork-ts-checker-webpack-plugin": "^7.2.11",
"fs-extra": "10.1.0",
"geotiff": "^2.0.5",
"html-webpack-injector": "^1.1.4",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.1",
"jest-canvas-mock": "^2.4.0",
"jest-environment-jsdom": "^28.1.1",
"joi-browser": "^13.4.0",
"mini-css-extract-plugin": "^2.6.1",
"neo-async": "^2.6.2",
"npm-run-all": "^4.1.3",
"object-assign": "^4.1.1",
"ol": "~6.14.1",
"ol-ext": "^3.2.26",
"patch-package": "^6.2.2",
"proj4": "^2.5.0",
"promise": "^8.0.1",
"raf": "^3.4.0",
"react": "^17.0.2",
"react-app-polyfill": "^3.0.0",
"react-autocomplete": "^1.8.1",
"react-autosuggest": "^10.1.0",
"react-beautiful-dnd": "^13.1.0",
"react-dev-utils": "^12.0.0",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"react-dom": "^17.0.2",
"react-highlight": "^0.14.0",
"react-redux": "^8.0.2",
"react-scripts": "^5.0.0",
"redux": "^4.0.5",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0",
"resolve": "^1.6.0",
"sass": "^1.49.9",
"serve": "^13.0.2",
"sneakpeek-cli": "^0.2.1",
"source-map-loader": "^4.0.0",
"swiper": "^6.8.4",
"ts-jest": "^28.0.5",
"ts-loader": "^9.3.1",
"ts-node": "^10.8.1",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.7.4",
"url-loader": "^4.1.1",
"uuid": "^7.0.3",
"webpack": "~5.73.0",
"webpack-dev-server": "^4.9.2",
"webpack-manifest-plugin": "^5.0.0"
},
}

Cannot mock in Jest with ES modules

I'm trying to reproduce the example given in Jest documentation about mocking module. The code is the following one.
users.js
import axios from 'axios'
class Users {
static all () {
return axios.get('/users.json').then(resp => resp.data)
}
}
export default Users
test.js
import axios from 'axios'
import Users from './users'
import { jest } from '#jest/globals'
jest.mock('axios')
test('should fetch users', () => {
const users = [ { name: 'Bob' } ]
const resp = { data: users }
axios.get.mockResolvedValue(resp)
// or you could use the following depending on your use case:
// axios.get.mockImplementation(() => Promise.resolve(resp))
return Users.all().then(data => expect(data).toEqual(users))
})
The code from test.js is a little bit different from the documentation. I had to add import { jest } from '#jest/globals' because of this issue
package.json
{
...
"type": "module",
"engines": {
"node": ">=14.17.6"
},
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "8081"
}
},
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon --insecure-http-parser --inspect server/index.js --watch server",
"test-server": "cross-env CYPRESS_MODE=true THIRD_PARTY_ROUTES_ENABLED=false npm run start",
"ci-test-server": "npm run test-server & wait-on http://localhost:8081/fr-FR",
"build-for-cypress": "cross-env NUXT_ENV_CYPRESS_MODE=true npm run build",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node --insecure-http-parser server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"phrase": "node scripts/phraseapp/phraseapp.js",
"cypress:open-mocked": "cypress open --env env=mock",
"cypress:run-mocked": "cypress run --env env=mock",
"cypress:open-unmocked": "cypress open --env=real,\"TAGS=not #mockOnly\"",
"cypress:run-unmocked": "cypress run --env=real,\"TAGS=not #mockOnly\"",
"ci-test": "cross-env TEST_MODE=true jest tests --runInBand --coverage",
"front-unit-tests": "cross-env jest tests/client/unit",
"back-tests": "cross-env TEST_MODE=true jest tests/server --runInBand"
},
"dependencies": {
"#cospired/i18n-iso-languages": "^3.1.0",
"#jest/globals": "^27.2.5",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/i18n": "^7.0.3",
"#nuxtjs/proxy": "^2.1.0",
"#nuxtjs/style-resources": "^1.2.1",
"#nuxtjs/toast": "^3.3.1",
"#sport-activities/nuxt-di": "^0.1.2",
"#vtmn/css": "^0.22.1",
"#vtmn/icons": "^0.4.0",
"abort-controller": "^3.0.0",
"agentkeepalive": "^4.1.4",
"atob": "^2.1.2",
"axios": "^0.22.0",
"body-parser": "^1.19.0",
"cacheable-lookup": "^6.0.1",
"connect-redis": "^6.0.0",
"cookie-parser": "^1.4.5",
"cookie-universal-nuxt": "^2.1.5",
"cross-env": "^7.0.3",
"csurf": "^1.11.0",
"dd-trace": "^1.4.1",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-session": "^1.17.2",
"express-validator": "^6.12.2",
"google-libphonenumber": "^3.2.24",
"helmet": "^4.6.0",
"ioredis": "^4.27.9",
"lodash": "^4.17.21",
"luxon": "^2.0.2",
"memory-cache": "^0.2.0",
"moment": "^2.29.1",
"morgan": "^1.10.0",
"nock": "^13.1.3",
"node-cron": "^3.0.0",
"node-fetch": "^2.6.1",
"nuxt": "^2.15.8",
"nuxt-lazy-load": "^1.2.7",
"nuxt-purgecss": "^1.0.0",
"oauth": "^0.9.15",
"p-limit": "^3.1.0",
"passport": "^0.4.1",
"passport-oauth2": "^1.6.1",
"redlock": "^4.2.0",
"uuid": "^8.3.2",
"validator": "^13.6.0",
"vue-server-renderer": "^2.6.14",
"vue-toasted": "^1.1.28",
"wait-on": "^6.0.0",
"winston": "^3.3.3",
"world-countries": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/eslint-parser": "^7.15.7",
"#babel/preset-env": "^7.15.6",
"#jest/types": "^27.2.4",
"#types/jest": "^27.0.2",
"#vue/test-utils": "1.2.2",
"axios-mock-adapter": "^1.20.0",
"babel-core": "^7.0.0-bridge.0",
"css-loader": "^5.2.7",
"cypress": "8.5.0",
"cypress-cucumber-preprocessor": "^4.2.0",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jest": "^24.5.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-vue": "^7.18.0",
"file-loader": "^6.2.0",
"ioredis-mock": "^5.6.0",
"jest": "^27.2.4",
"less": "^4.1.1",
"less-loader": "^7.2.1",
"nodemon": "^2.0.13",
"supertest": "^6.1.6",
"vue-i18n": "8.26.5",
"vue-jest": "^3.0.7",
"vue-svg-loader": "^0.16.0"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"step_definitions": "tests/client/e2e/integration/steps",
"cucumberJson": {
"generate": true,
"outputFolder": "tests/client/e2e/integration/cucumber-json",
"filePrefix": "",
"fileSuffix": ".cucumber"
}
}
}
jest.config.js
export default {
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/tests/client/unit/__mocks__/fileMock.js',
'\\.(css|less)$': '<rootDir>/tests/client/unit/__mocks__/styleMock.js',
'^#/(.*)$': '<rootDir>/$1'
},
moduleFileExtensions: [
'js',
'json',
'vue',
'svg'
],
transform: {},
testMatch: [
'**/?(*.)+(test).[jt]s?(x)',
'**/tests/routes/**/*.spec.js'
],
testEnvironment : 'jsdom',
setupFilesAfterEnv: [
'./tests/jest-setup/jest.setup.ioredis-mock.js',
'./tests/jest-setup/jest.setup.timers.js',
'./tests/jest-setup/jest.setup.envvar.js',
'./tests/jest-setup/jest.setup.nock.js',
'./tests/jest-setup/jest.setup.redis-cache.js'
]
}
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }]
]
}
When executing the test, I'm getting this as a result:
axios.get.mockResolvedValue is not a function
TypeError: axios.get.mockResolvedValue is not a function
Looks like the mock won't work. What have I missed to make it work?

Define no proxy but get 'When "proxy" is specified in package.json' error

When I run npm run dev I get an error message:
When "proxy" is specified in package.json it must start with either http:// or https:// , but I don't define any proxy in my package.json. How can this happen and how do I solve it?
package.json
{
"name": "vue-admin-template",
"version": "4.3.0",
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
"author": "Pan <panfree23#gmail.com>",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
"dependencies": {
"#gitgraph/js": "^1.3.5",
"#toast-ui/vue-editor": "^2.5.1",
"axios": "0.18.1",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"echarts": "^4.8.0",
"element-ui": "2.13.2",
"element-ui-el-table-draggable": "^1.2.9",
"fuse.js": "^6.4.3",
"jquery": "^3.5.1",
"js-cookie": "2.2.0",
"jwt-simple": "^0.5.6",
"moment": "^2.27.0",
"monaco-editor": "^0.20.0",
"monaco-editor-webpack-plugin": "^1.9.0",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"socket.io-client": "^4.0.0",
"tui-editor": "1.3.3",
"vue": "2.6.10",
"vue-chartjs": "^3.5.1",
"vue-i18n": "^8.22.1",
"vue-jwt-decode": "^0.1.0",
"vue-router": "3.0.6",
"vue-showdown": "^2.4.1",
"vuedraggable": "2.20.0",
"vuex": "3.1.0",
"wangeditor": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "3.6.0",
"#vue/cli-plugin-eslint": "^3.9.1",
"#vue/cli-plugin-unit-jest": "3.6.3",
"#vue/cli-service": "3.6.0",
"#vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "^9.5.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"chalk": "2.4.2",
"connect": "3.6.6",
"eslint": "5.15.3",
"eslint-plugin-vue": "5.2.2",
"html-webpack-plugin": "3.2.0",
"mockjs": "1.0.1-beta3",
"runjs": "^4.3.2",
"sass": "^1.26.8",
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.3",
"serve-static": "^1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"vue-template-compiler": "2.6.10"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
It was in vue.config.js. Setting wrong proxy here will occur the same error message.

npm install how to prevent nested node_mocules folders

I have a package.json file that has
"dependencies": {
"packageA": "^1.0.0",
and this package A has another dependency in his package.json
"dependencies": {
"packageA_B": "^1.0.0",
Then, if I run npm install on windows 10, node v11.11.0 I end up having
/node_modules/packageA
/node_modules/packageA/node_modules/packageA_B
Then, if I delete this package and run npm install packageA I end up having
/node_modules/packageA
/node_modules/packageA_B
Which is what I want from the beginning. Why is this inconsistency happening? How to force to install all packages in a non-nested way?
package.json
{
"name": "first_package",
"private": true,
"description": "",
"main": "gatsby-config.js",
"version": "0.2.25",
"author": "",
"dependencies": {
"packageA": "git+https://blah.git#h5c8f72",
"gatsby": "2.1.4",
"gatsby-plugin-compile-es6-packages": "^1.0.6",
"gatsby-plugin-offline": "^2.0.24",
"gatsby-plugin-page-creator": "^2.0.10",
"gatsby-plugin-react-helmet": "^3.0.8",
"gatsby-plugin-sharp": "^2.0.25",
"gatsby-plugin-styled-components": "^3.0.6",
"gatsby-source-filesystem": "^2.0.23",
"gatsby-transformer-sharp": "^2.1.15",
"path": "0.12.7",
"react": "16.8.6",
"react-dom": "16.8.6",
"styled-components": "^4.1.3",
"styled-icons": "^7.4.2"
},
"devDependencies": {
"babel-eslint": "^10.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-standard": "^4.0.0",
"gulp": "^4.0.0",
"gulp-help": "^1.6.1",
"prettier": "^1.16.4"
},
"keywords": [
""
],
"license": "",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"repository": {
"type": "git",
"url": "https://"
},
"bugs": {
"url": "https://"
}
}
Package A package.json
{
"name": "packageA",
"private": true,
"description": "",
"version": "0.2.25",
"main": "index.js",
"author": "",
"dependencies": {
"packageA_B": "0.2.25",
"styled-components": "4.2.0",
"styled-icons": "7.9.0",
"babel-plugin-styled-components": "1.10.0",
"gatsby-plugin-styled-components": "3.0.7",
"gatsby-plugin-page-creator": "2.0.12",
"gatsby-source-filesystem": "2.0.28",
"gatsby-plugin-compile-es6-packages": "1.1.0",
"path": "0.12.7",
"esm": "3.2.14",
"prop-types": "15.7.2",
"gatsby-plugin-gtag": "1.0.10",
"gatsby-plugin-manifest": "2.0.26",
"react-cookie-consent": "2.2.2"
},
"peerDependencies": {
"gatsby": "2.1.4",
"react": "16.8.6",
"react-dom": "16.8.6"
},
"devDependencies": {
"gatsby": "2.1.4",
"react": "16.8.6",
"react-dom": "16.8.6",
"babel-eslint": "^10.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-standard": "^4.0.0",
"gulp": "^4.0.0",
"gulp-help": "^1.6.1",
"prettier": "^1.16.4"
},
"keywords": [
""
],
"license": "",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"repository": {
"type": "git",
"url": ""
},
"bugs": {
"url": ""
}
}
Package A_B package.json
{
"name": "packageA_B",
"version": "0.2.25",
"description": "",
"author": "",
"main": "index.js",
"license": "",
"private": false,
"dependencies": {
"styled-components": "4.2.0",
"styled-icons": "7.9.0",
"babel-plugin-styled-components": "1.10.0",
"gatsby-plugin-styled-components": "3.0.7",
"gatsby-plugin-page-creator": "2.0.12",
"gatsby-source-filesystem": "2.0.28",
"gatsby-plugin-compile-es6-packages": "1.1.0",
"path": "0.12.7",
"esm": "3.2.14",
"prop-types": "15.7.2",
"gatsby-mdx": "0.4.2",
"#mdx-js/mdx": "0.20.3",
"#mdx-js/tag": "0.20.3",
"gatsby-image": "2.0.31",
"gatsby-plugin-offline": "2.0.25",
"gatsby-plugin-react-helmet": "3.0.11",
"gatsby-plugin-sharp": "2.0.32",
"gatsby-transformer-sharp": "2.1.17",
"react-helmet": "5.2.0",
"react-share": "2.4.0"
},
"peerDependencies": {
"gatsby": "2.1.4",
"react": "16.8.6",
"react-dom": "16.8.6"
},
"devDependencies": {
"gatsby": "2.1.4",
"react": "16.8.6",
"react-dom": "16.8.6",
"babel-eslint": "^10.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-standard": "^4.0.0",
"gulp": "^4.0.0",
"gulp-help": "^1.6.1",
"prettier": "^1.16.4"
},
"keywords": [
""
],
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"repository": {
"type": "git",
"url": ""
},
"bugs": {
"url": ""
}
}
Solved by specifying not an exact version "1.0.0" but a compatible version "^1.0.0". Somehow with the exact version npm doesn't share the package even though they are the exact same version. Also, running npm dedupe doesn't make anything when an exact version is specified.

Jest fails with SyntaxError: Unexpected token {

I'm integrating jest into my nuxt application using vue-test-utils (following Edd Yerburgh's new book).
The test fails right out of the box with "SyntaxError: Unexpected token {". Similar code builds fine with nuxt and the tests ran with Ava. I'm assuming that I have a problem with my jest configuration.
I've included my package.json, code excerpt and console out.
Thanks for any help,
Dan
npm 6.4.0
package.json
{
"name": "cxl-ui-base",
"version": "1.0.0",
"description": "Base UI for SA and CXL",
"author": "Dan Mahoney <dan.mahoney#contextlabs.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test:coverage": "TEST=unit nyc --report-dir=generated-files/coverage ava --tap | tap-summary",
"test:unit": "NODE_ENV=testing jest --verbose --no-cache",
"test:watch": "NODE_ENV=pro ava --watch",
"lint": "eslint -f node_modules/eslint-detailed-reporter/lib/detailed.js --ext .js,.vue -o generated-files/lint.html .",
"doc": "jsdoc -c doc.conf.js"
},
"dependencies": {
"#nuxtjs/auth": "^4.5.1",
"#nuxtjs/axios": "^5.3.1",
"#nuxtjs/dotenv": "^1.1.1",
"ava-describe": "^2.0.0",
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"dotenv": "^5.0.1",
"eslint-import-resolver-alias": "^1.1.1",
"express": "^4.16.3",
"jsdoc-vue": "^1.0.0",
"jsonwebtoken": "^8.2.1",
"leaflet": "^1.3.1",
"lodash": "^4.17.10",
"moment": "^2.22.1",
"npm": "^6.4.0",
"nuxt": "1.4.1",
"nuxt-leaflet": "0.0.10",
"nuxt-material-design-icons": "^1.0.4",
"oauth-1.0a": "^2.2.4",
"vue": "^2.5.16",
"vue-d3": "^0.1.0",
"vue-i18n": "^7.6.0",
"vue-uuid": "^1.0.0",
"vue2-leaflet": "^1.0.2",
"vuelidate": "^0.7.2",
"vuetify": "^1.0.17",
"vuex": "^3.0.1",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-rc.2",
"#vue/test-utils": "^1.0.0-beta.19",
"ajv": "^6.5.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^23.4.2",
"babel-plugin-add-module-exports": "^0.3.3",
"babel-plugin-transform-imports": "^1.4.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"chromedriver": "^2.38.3",
"eslint": "^4.3.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-config-standard": "^10.2.1",
"eslint-detailed-reporter": "^0.7.3",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsdoc": "^3.7.1",
"eslint-plugin-leon-require-jsdoc": "0.0.1",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"eslint-plugin-vue-a11y": "0.0.26",
"jest": "^23.5.0",
"jest-vue-preprocessor": "^1.4.0",
"jsdoc": "^3.5.5",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"loglevel": "^1.6.1",
"nightwatch": "^0.9.21",
"npm-merge-driver": "^2.3.5",
"raf": "^3.4.0",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^1.0.0",
"selenium": "^2.20.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"tap-summary": "^4.0.0",
"vue-jest": "^2.6.0",
"vue-loader": "^13.7.2",
"vue-meta": "^1.5.0",
"vue-template-compiler": "^2.5.16"
},
"jest": {
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
},
"eslintConfig": {
"env": {
"browser": true,
"node": true,
"jest": true
}
}
}
Code
import { shallowMount, createLocalVue } from '#vue/test-utils';
import Vuetify from 'vuetify';
import test from 'jest';
import ClientMap from '#/components/Map'; // eslint-disable-line
import { commonAssertions } from '#/plugins/test.utils';
// for mocking
import modal from '#/components/Modal'; // eslint-disable-line
const localVue = createLocalVue();
localVue.use(Vuetify);
test('Sanity Test', () => {});
test('Initial State', (t) => {
const $modal = sinon.mock(modal);
const wrapper = shallowMount(Map, {
mocks: {
$modal,
},
localVue,
});
commonAssertions(Map, t, wrapper);
});
test.todo('Select Layer');
test.todo('Test Modal??');
test.todo('Test Tooltip??');
test.todo('UnSelect Layer');
Relevant Output
FAIL src/test/specs/map.spec.js
● 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".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/dan.mahoney/Projects/cxl-ui-base/src/test/specs/map.spec.js:10
import { shallowMount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.045s
The problem is that nuxt puts the babel config into nuxt.config.js. I found an npm package that solves that. It allows you to have a .babelrc file and have it injected into nuxt.config.js. When Jest compiles the files for testing, it uses .babelrc. Kudos to the author.
You should set the NODE_ENV to test then run the jest
you can do it by adding this line to your package.json file
"scripts": {
....
"test": "NODE_ENV=test jest"
},

Resources