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
Related
When I run:android, the app launch on my device but the metro server faild
it gives me this error
I've installed the package from here: https://www.nativewind.dev/
My Package.JSON:
{
"name": "react-native-starter",
"version": "2.1.0",
"private": false,
"resolutions": {
"deprecated-react-native-listview": "0.0.6"
},
"scripts": {
"start": "react-native start",
"test": "jest",
"test:update": "jest -u",
"test:coverage": "jest --coverage",
"run:ios": "react-native run-ios",
"run:android": "react-native run-android",
"lint": "./node_modules/eslint/bin/eslint.js src",
"lint:fix": "./node_modules/eslint/bin/eslint.js src --fix",
"flow": "./node_modules/flow-bin/cli.js",
"e2e:build": "detox build --configuration ios.sim.debug",
"e2e:test": "detox test --configuration ios.sim.debug"
},
"dependencies": {
"#react-native-community/cli": "^4.10.1",
"#react-native-community/masked-view": "^0.1.9",
"#react-native-community/toolbar-android": "^0.1.0-rc.2",
"#react-navigation/bottom-tabs": "^5.2.6",
"#react-navigation/drawer": "^5.4.1",
"#react-navigation/native": "^5.1.5",
"#react-navigation/stack": "^5.2.10",
"global": "^4.4.0",
"i18n-js": "^3.2.1",
"jetifier": "^1.6.5",
"lodash": "^4.17.13",
"moment": "^2.24.0",
"nativewind": "^2.0.11",
"react": "16.9.0",
"react-native": "0.63.1",
"react-native-calendars": "1.265.0",
"react-native-gesture-handler": "^1.5.0",
"react-native-gifted-chat": "^0.11.3",
"react-native-lightbox": "^0.8.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^1.3.1",
"react-native-modal": "^9.0.0",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-modal-dropdown": "0.7.0",
"react-native-paper": "^3.1.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.5.0",
"react-native-ui-lib": "^3.39.0",
"react-native-vector-icons": "^6.6.0",
"react-redux": "^6.0.1",
"recompose": "^0.30.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"victory-native": "^31.0.0"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/preset-flow": "^7.0.0",
"#babel/runtime": "^7.5.0",
"#react-native-community/eslint-config": "^0.0.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
"danger": "^7.0.2",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.6.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"flow-bin": "^0.105.0",
"jest": "^24.1.0",
"jsdom": "13.0.0",
"jsdom-global": "3.0.2",
"metro-react-native-babel-preset": "^0.51.1",
"plop": "^2.2.0",
"prettier": "^1.16.1",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.6.3",
"react-test-renderer": "16.8.1",
"sinon": "^7.1.1",
"tailwindcss": "^3.2.2"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/node_modules/**",
"!android/**",
"!ios/**",
"!assets/**"
],
"coverageDirectory": "jest_coverage",
"setupFiles": [
"./jest-setup.js"
],
"testPathIgnorePatterns": [
"/node_modules/",
"/e2e/"
]
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"detox": {
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ReactNativeStarter.app",
"build": "xcodebuild -UseModernBuildSystem=NO -project ios/ReactNativeStarter.xcodeproj -scheme ReactNativeStarter -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone XS"
},
"ios.sim.release": {
"binaryPath": "ios/build/Build/Products/Release-iphonesimulator/ReactNativeStarter.app",
"build": "xcodebuild -UseModernBuildSystem=NO -project ios/ReactNativeStarter.xcodeproj -scheme ReactNativeStarter -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone 7"
}
},
"test-runner": "jest"
}
}
I deleted node_modules folder it didn't work
And my config for that package was correct as the official doc
Anyone has this problem before because I've been searching many hours .
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.
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.