I am receiving the following error when attempting to run a test suite using jest:
● Test suite failed to run
TypeError: Cannot read property '1' of undefined
at Plugin.manipulateOptions (node_modules/babel-plugin-module-resolver/lib/index.js:88:9)
at run.next (<anonymous>)
at transform.next (<anonymous>)
I have attempted to resolve the issue by removing node_modules and reinstalling to no avail.
Here is a copy of my package.json which is placed in the root directory:
{
"name": "obfuscate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"test:coverage": "jest --coverage",
"test:snapshots": "jest --updateSnapshot",
"test:watch": "jest --watch -o",
"serve": "node -r babel-register node_modules/webpack-dev-server/bin/webpack-dev-server --config config/webpack/environments/serve/index.js",
"build:dev": "node -r babel-register node_modules/webpack/bin/webpack --config config/webpack/environments/dev/index.js",
"build:prod": "node -r babel-register node_modules/webpack/bin/webpack --config config/webpack/environments/prod/index.js",
"start": "npm run build:dev",
"lint:js": "eslint \"src/**/*.js\"",
"lint:styles": "stylelint \"src/**/*.scss\"",
"prepush": "npm run lint:styles && npm run lint:js",
"browsersync": "npx browser-sync start --config bs-config.js",
"bsync": "concurrently \"npm run start \" \"npx browser-sync start --config bs-config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-jest": "^22.0.4",
"babel-loader": "^7.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-do-expressions": "^6.22.0",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-plugin-transform-function-bind": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-register": "^6.26.0",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"del-webpack-plugin": "^1.0.6",
"domready": "^1.0.8",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.6",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-loader": "^0.5.1",
"husky": "^0.14.3",
"identity-obj-proxy": "^3.0.0",
"img-loader": "^2.0.0",
"jest": "^22.0.4",
"jsdom": "^16.2.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"postcss-loader": "^2.0.6",
"react": "^16.8.2",
"react-collapsible": "^2.1.0",
"react-countup": "^4.0.0",
"react-dom": "^16.8.2",
"react-equalizer": "^1.3.0",
"react-router-dom": "^4.3.1",
"react-scroll": "^1.7.8",
"react-slick": "^0.23.1",
"react-spinners": "^0.3.2",
"react-tabs": "^2.1.1",
"react-text-mask": "^5.1.0",
"react-transition-group": "^2.5.0",
"react-widgets": "^4.1.2",
"sass-loader": "^6.0.6",
"sass-resources-loader": "^1.3.5",
"standard-loader": "^6.0.1",
"stylelint": "^8.4.0",
"stylelint-config-standard": "^18.0.0",
"stylelint-webpack-plugin": "^0.9.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.1",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^2.0.0",
"webpack-manifest-plugin": "^2.0.0-rc.1",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"#obfuscate/components": "^1.0.125",
"#obfuscate/react-ranger": "^1.0.0",
"axios": "^0.19.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.26.0",
"blazy": "^1.8.2",
"browser-sync": "^2.26.7",
"classlist-polyfill": "^1.2.0",
"concurrently": "^4.1.2",
"core-js": "^3.6.0",
"eslint": "^6.7.2",
"eslint-config-standard": "^14.1.0",
"eslint-loader": "^3.0.3",
"formdata-polyfill": "^3.0.19",
"isomorphic-fetch": "^2.2.1",
"js-match-height": "^1.0.7",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"mobx-react-form": "^1.36.3",
"nodelist-foreach-polyfill": "^1.2.0",
"regenerator-runtime": "^0.13.3",
"scroll-lock": "^2.1.2",
"smoothscroll": "^0.4.0",
"swiper": "^5.2.1",
"url-search-params": "^1.1.0",
"validatorjs": "^3.15.1"
},
"stylelint": {
"extends": "stylelint-config-standard",
"ignoreFiles": [
"src/styles/vendor/**/*.scss"
],
"ignoreProperties": [
"composes"
],
"rules": {
"no-descending-specificity": null,
"max-empty-lines": 4,
"string-quotes": "single",
"function-url-quotes": "always",
"color-hex-length": "long",
"declaration-colon-newline-after": null,
"declaration-block-no-redundant-longhand-properties": null,
"font-family-name-quotes": null,
"number-leading-zero": "never",
"value-list-comma-newline-after": null,
"max-nesting-depth": 4,
"selector-pseudo-element-colon-notation": "single",
"at-rule-name-space-after": null,
"declaration-empty-line-before": null,
"at-rule-empty-line-before": null,
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"function",
"extend",
"if",
"else",
"each",
"mixin",
"include",
"return",
"media",
"at-root",
"debug",
"warn",
"error",
"for",
"content"
]
}
],
"property-no-unknown": [
true,
{
"ignoreProperties": [
"composes"
]
}
]
}
},
"jest": {
"testURL": "http://localhost",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|html)$": "<rootDir>config/jest/jest.filemock.js",
"\\.(css|scss)$": "identity-obj-proxy"
},
"setupFiles": [
"./config/jest/jest.setup.js"
],
"modulePaths": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.js",
"!src/base.js",
"!src/index-react.js",
"!src/index.js"
],
"transform": {
"^.+\\.js?$": "babel-jest"
},
"verbose": true
},
"standard": {
"globals": [
"jest",
"describe",
"it",
"expect",
"shallow",
"snapshot",
"test",
"enzyme",
"mount",
"after",
"afterEach",
"beforeEach",
"parent",
"fetch"
],
"ignore": [
"node_modules/**",
"*.test.js"
],
"parser": "babel-eslint"
}
}
Here is a copy of the jest.config.js file also placed in the root directory:
module.exports = {
clearMocks: true,
coverageDirectory: "coverage",
testURL: "http://localhost",
};
Here is a copy of my jest.setup.js file which is placed in config/jest:
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
window.matchMedia = window.matchMedia || function () {
return {
matches: false,
addListener: function () { },
removeListener: function () { }
}
}
configure({ adapter: new Adapter() })
Issue resolved. Issue was caused by running the tests by using the "jest" command in the terminal which is different from using the npm test script which also only runs the "jest" command. The difference is the former was using a higher version of Jest which I had installed globally and ended up running into issues whereas the latter used the version of jest that corresponds with the version in the package.json.
Related
I have the following babel.config.js (not .rc) file:
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "3.8",
targets: {
chrome: 97 // January 2022
},
"modules": false
}
]
],
"plugins": [
["#babel/plugin-transform-react-jsx", {
"throwIfNamespace": false, // defaults to true
"runtime": "automatic" // defaults to classic
}],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-object-assign",
"#babel/plugin-proposal-object-rest-spread",
["module:fast-async", { "spec": true }]
]
}
I find that even though I have targeted a modern browser (Chrome v97, released Jan 2022) Babel still transpiles async/await to promise-based code.
I would like to target ES2021 so Babel doesn't need to transpile async/await.
Additionally I want to use the ?? and ?. operators. In fact, anything ES2021 supports.
I know there are plugins to emulate most things but the browser I'm targeting already supports ES2021. I just don't know how to tell Babel "don't transpile if browser supports it already.".
How would I do this?
Here is my package.json:
{
"name": "scts-expenses",
"version": "0.1.0",
"description": "",
"scripts": {
"build": "webpack --config tools/webpack/config/build",
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/dev --watch"
},
"author": "scott",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.18.10",
"#babel/core": "^7.12.10",
"#babel/node": "^7.18.10",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-object-assign": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.18.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.18.6",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.10.6",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.2.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.3",
"core-js": "^3.25.0",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"storm-modal": "^1.2.1",
"storm-tabs": "^1.3.3",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}
OK, I found out how to use the latest (or, as modern as I need) features.
The key is to use babel/preset-env and deny Internet Explorer as browser targets.
I discovered this by tinkering around at https://babeljs.io/repl/ . When I found the settings that produced modern code (no converting await/async to promises, for example) I copied them to my babel config.
Here's my babel config:
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
Object.assign({}, process.env.NODE_ENV === "test"
? {
"loose": true,
"targets": {
"node": 8,
"browsers": [">0.25%","not IE"]
}
}
: {
"useBuiltIns": "entry",
"corejs": "3.8",
"targets": {
"browsers": "defaults, not ie 11, not ie_mob 11"
},
"modules": false
}
)
]
],
"plugins": [
["#babel/plugin-transform-react-jsx", {
"throwIfNamespace": false, // defaults to true
"runtime": "automatic" // defaults to classic
}]
]
}
};
And here's my package.json. Note: I believe some/all of the polyfills referenced (such as es6-object-assign and promise-polyfill) are no longer required. I will remove them in my project - please do not include them in yours unless necessary.
{
"name": "NeverYouMind ;)",
"version": "0.1.0",
"description": "",
"scripts": {
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/dev --watch"
},
"author": "Scotty T",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.18.10",
"#babel/core": "^7.12.10",
"#babel/node": "^7.18.10",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-object-assign": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.18.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.18.6",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.10.6",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.2.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.3",
"core-js": "^3.25.0",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}
When I run jest --coverage jest only collects coverage from JavaScript files, but not my vue files. The folder structure is correct. jest.config.js is in the root folder, just like /components and /lib. For me, there is no logical explanation why coverage is collected from JavaScript files but not from vue files.
Here is my jest.config.js
module.exports = {
verbose: true,
setupFilesAfterEnv: ['<rootDir>/test-framework-scripts.js'],
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue',
'node',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/$1',
},
moduleDirectories: [
'node_modules',
'bower_components',
'shared',
'test/tmp',
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|png|jpe?g|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.js$': 'babel-jest',
'^.+\\.svg$': '<rootDir>/jest-svg-transform.js',
'\\.(gql|graphql)$': 'jest-transform-graphql',
},
transformIgnorePatterns: [
'<rootDir>/node_modules/(!gsap)',
],
snapshotSerializers: [
'jest-serializer-vue',
],
testMatch: [
'<rootDir>/test/**/*.spec.(js|jsx|ts|tsx)',
],
testPathIgnorePatterns: [
'<rootDir>/test/client/shared-examples/',
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
collectCoverageFrom: [
'components/**/*.{js,vue}',
'layouts/**/*.{js,vue}',
'lib/**/*.{js,vue}',
'middleware/**/*.{js,vue}',
'mixins/**/*.{js,vue}',
'pages/**/*.{js,vue}',
'store/**/*.{js,vue}',
'!<rootDir>/node_modules/**',
'!<rootDir>/test/**',
],
coverageReporters: ['text', 'html'],
};
package.json
{
"name": "stockpicker",
"version": "1.0.0",
"description": "a stockpicker",
"author": "Nico Meyer",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"test": "jest",
"test.watch": "jest --watch"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/vue-fontawesome": "^0.1.9",
"#nuxtjs/axios": "^5.3.6",
"axios": "^0.19.2",
"bootstrap-vue": "^2.3.0",
"chai": "^4.2.0",
"core-js": "^2.6.11",
"cross-env": "^5.2.0",
"firebase": "^7.8.0",
"js-cookie": "^2.2.1",
"moment": "^2.24.0",
"nuxt": "^2.11.0",
"vue": "^2.6.11",
"vue-async-computed": "^3.6.1",
"vue-clickaway2": "^2.3.1",
"vue2-touch-events": "^2.1.0",
"vuex": "^3.1.2"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#nuxtjs/eslint-config": "^0.0.1",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^25.1.0",
"eslint": "^5.3.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-standard": ">=12.0.0",
"eslint-import-resolver-webpack": "^0.11.1",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jest": ">=22.3.0",
"eslint-plugin-node": ">=8.0.1",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-promise": ">=4.0.1",
"eslint-plugin-standard": ">=4.0.0",
"eslint-plugin-vue": "^5.2.2",
"jest": "^25.1.0",
"jest-expect-message": "^1.0.2",
"jest-extended": "^0.11.5",
"jest-serializer-vue": "^2.0.2",
"jest-transform-graphql": "^2.1.0",
"jest-transform-stub": "^2.0.0",
"jest-watch-typeahead": "^0.4.2",
"jsdom": "^15.1.0",
"jsdom-global": "^3.0.2",
"node-sass": "^4.13.1",
"nodemon": "^1.18.9",
"resolve-url-loader": "^3.1.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.5",
"webpack": "^4.32.0"
}
}
Can you tell me what's wrong here?
Its a regression in jest v25. Nothing can be done at the moment. The issue opened in jest repo https://github.com/facebook/jest/issues/9490
I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};
I have the following package.json config(babel options are at the bottom):
{
"name": "react-tea-timer",
"version": "0.2.0",
"private": false,
"devDependencies": {
"autoprefixer": "6.7.2",
"babel-core": "6.22.1",
"babel-eslint": "7.1.1",
"babel-jest": "18.0.0",
"babel-loader": "6.2.10",
"babel-preset-mobx": "^1.0.1",
"babel-preset-react-app": "^2.2.0",
"babel-runtime": "^6.20.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.26.1",
"detect-port": "1.1.0",
"dotenv": "2.0.0",
"enzyme": "^2.7.1",
"eslint": "3.16.1",
"eslint-config-react-app": "^0.6.2",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "4.0.0",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.10.0",
"flow-bin": "^0.42.0",
"fs-extra": "0.30.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.3",
"jest": "^19.0.2",
"json-loader": "0.5.4",
"object-assign": "4.1.1",
"postcss-loader": "1.2.2",
"promise": "7.1.1",
"react-addons-test-utils": "^15.4.2",
"react-dev-utils": "^0.5.2",
"sinon": "^2.1.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.14.0",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "2.0.2"
},
"dependencies": {
"mobx": "^3.1.9",
"mobx-react": "^4.1.8",
"rc-slider": "^6.3.1",
"react": "^15.4.2",
"react-blur-image-loader": "^0.2.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"flow": "flow"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testPathIgnorePatterns": [
"<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
}
},
"babel": {
"presets": [
"react-app",
"mobx"
]
},
"eslintConfig": {
"extends": "react-app"
},
"homepage": "https://shooshte.github.io/teaTimer/"
}
Now according to the babel docs this is the correct way to pass in multiple presets, but I am still getting the following error when running npm run start:
Error in ./src/Stores/timerStore.js Module build failed:
ReferenceError: [BABEL]
/Users/shooshte/PersonalProjects/teaTimer/src/Stores/timerStore.js:
Unknown option:
/Users/shooshte/PersonalProjects/teaTimer/node_modules/mobx/lib/mobx.js.extras.
Check out http://babeljs.io/docs/usage/options/ for more information
about options.
A common cause of this error is the presence of a configuration
options object without the corresponding preset name. Example:
Invalid: { presets: [{option: value}] } Valid: { presets:
[['presetName', {option: value}]] }
For more detailed information on preset configuration, please see
http://babeljs.io/docs/plugins/#pluginpresets-options. (While
processing preset:
"/Users/shooshte/PersonalProjects/teaTimer/node_modules/mobx/lib/mobx.js")
at Array.map (native) # ./src/index.js 15:18-48
I have a React project based on React Redux Starter Kit.
In Jest tests: when I trying to import something with root-based path like "components/Link" - it does not work. Only relative paths are working.
Putting
{ "jest": { "rootDir": "<rootDir>/src" } }
in file package.json does not work.
Is there another way?
File package.json:
{
"name": "react-redux-starter-kit",
"version": "3.0.0-alpha.2",
"description": "",
"main": "index.js",
"engines": {
"node": ">=4.5.0",
"npm": "^3.0.0"
},
"scripts": {
"clean": "rimraf dist",
"compile": "better-npm-run compile",
"lint": "eslint bin build config server src tests",
"lint:fix": "npm run lint -- --fix",
"start": "better-npm-run start",
"dev": "better-npm-run dev",
"test": "jest",
"test:dev": "npm run test -- --watch",
"deploy": "better-npm-run deploy",
"deploy:dev": "better-npm-run deploy:dev",
"deploy:prod": "better-npm-run deploy:prod",
"codecov": "cat coverage/*/lcov.info | codecov"
},
"betterScripts": {
"compile": {
"command": "node bin/compile",
"env": {
"DEBUG": "app:*"
}
},
"dev": {
"command": "nodemon bin/server --ignore dist --ignore coverage --ignore tests --ignore src",
"env": {
"NODE_ENV": "development",
"DEBUG": "app:*"
}
},
"deploy": {
"command": "npm run lint && npm run clean && npm run compile",
"env": {
"DEBUG": "app:*"
}
},
"deploy:dev": {
"command": "npm run deploy",
"env": {
"NODE_ENV": "development",
"DEBUG": "app:*"
}
},
"deploy:prod": {
"command": "npm run deploy",
"env": {
"NODE_ENV": "production",
"DEBUG": "app:*"
}
},
"start": {
"command": "node bin/server",
"env": {
"DEBUG": "app:*"
}
},
"test": {
"command": "node ./node_modules/karma/bin/karma start build/karma.conf",
"env": {
"NODE_ENV": "test",
"DEBUG": "app:*"
}
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/davezuko/react-redux-starter-kit.git"
},
"author": "MyCityOnline",
"license": "MIT",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.3.13",
"babel-runtime": "^6.11.6",
"better-npm-run": "0.0.11",
"cropperjs": "^1.0.0-beta.2",
"css-loader": "^0.25.0",
"cssnano": "^3.7.4",
"debug": "^2.2.0",
"dotenv": "^2.0.0",
"es6-promise": "^4.1.0",
"essence-core": "^1.0.20",
"essence-switch": "^1.0.10",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.0",
"file-loader": "^0.9.0",
"font-awesome": "^4.7.0",
"fs-extra": "^0.30.0",
"html-webpack-plugin": "^2.22.0",
"imports-loader": "^0.6.5",
"ip": "^1.1.2",
"isomorphic-fetch": "^2.2.1",
"json-loader": "^0.5.4",
"jwt-decode": "^2.1.0",
"lodash": "^4.16.3",
"moment": "^2.17.1",
"node-sass": "^3.7.0",
"normalize.css": "^4.1.1",
"pikaday": "^1.5.1",
"postcss-loader": "^0.13.0",
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-redux": "^4.4.5",
"react-router": "^2.8.0",
"redux": "^3.6.0",
"redux-api-middleware": "^1.0.2",
"redux-thunk": "^2.0.0",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.6",
"webpack": "^1.12.14",
"whatwg-fetch": "^2.0.1",
"yargs": "^5.0.0"
},
"devDependencies": {
"babel-eslint": "^6.0.0-beta.6",
"babel-jest": "^19.0.0",
"babel-plugin-istanbul": "^2.0.1",
"breakpoint-sass": "^2.7.0",
"chai": "^3.4.1",
"chai-as-promised": "^5.3.0",
"chai-enzyme": "^0.5.0",
"cheerio": "^0.20.0",
"codecov": "^1.0.1",
"connect-history-api-fallback": "^1.3.0",
"enzyme": "^2.0.0",
"eslint": "^3.0.1",
"eslint-config-standard": "^6.2.1",
"eslint-config-standard-react": "^4.0.0",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-promise": "^3.3.0",
"eslint-plugin-react": "^6.0.0",
"eslint-plugin-standard": "^2.0.0",
"express": "^4.14.0",
"http-proxy-middleware": "^0.17.2",
"jest": "^19.0.2",
"karma": "^1.0.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.1",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-webpack-with-fast-source-maps": "^1.9.2",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"mocha": "^3.0.1",
"nodemon": "^1.10.2",
"phantomjs-prebuilt": "^2.1.12",
"react-addons-test-utils": "^15.0.0",
"redbox-react": "^1.2.10",
"redux-logger": "^2.6.1",
"regenerator-runtime": "^0.10.3",
"sinon": "^1.17.5",
"sinon-chai": "^2.8.0",
"susy": "^2.2.12",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2"
},
"jest": {
"rootDir": "<rootDir>/src"
}
}
Final working Jest part of file package.json:
"jest": {
"rootDir": "./src/",
"moduleFileExtensions": ["js", "jsx"],
"moduleDirectories": ["node_modules", "bower_components", "src"],
"verbose": true
}
I think that if you don't want to use relative paths, you have to define additional moduleDirectories, like
// package.json
{
"jest": {
"moduleFileExtensions": ["js", "jsx"],
"moduleDirectories": ["node_modules", "bower_components", "src"],
}
}
More about moduleDirectories in jest docs and configuring jest to find files.
Modifying moduleFileExtensions and moduleDirectories did not work for me. This did in jest.config.js:
moduleNameMapper: {
"src/(.*)": "<rootDir>/src/$1",
},
I found the solution here and found I ony needed to change moduleNameMapper.
https://til.hashrocket.com/posts/lmnsdtce3y-import-absolute-paths-in-typescript-jest-tests
This jest config can help:
"jest": {
"rootDir": ".",
"roots": ["<rootDir>"],
"modulePaths": ["<rootDir>"],
}
If you are using 'create-react-app' then install these development dependencies:
"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",
And also update the file .babelrc (create this file if it doesn't exist):
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
And now both Jest and npm test both work as they should.