JEST testing, getting error on import of configure from enzyme - javascript

I'm trying to run my tests in repo here: https://github.com/Futuratum/moon.holdings
But I'm getting the following error
/Users/leongaban/projects/Futuratum/moon.holdings/jest.config.js:1
(function (exports, require, module, __filename, __dirname) { import { configure } from 'enzyme'
My tests use to work and I haven't changed anything, so curious as to what could be causing this problem?
My jest.config.js file looks correct:
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })
package.json
{
"name": "moon.holdings",
"version": "2.0.0",
"description": "Moon Holdings: track your cryptocurrency portfolio.",
"main": "index.js",
"scripts": {
"dev": "next -p 7777",
"build": "next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --watch --no-cache",
"test-win": "SET NODE_ENV=test&& jest --watch"
},
"author": "Futuratum",
"license": "UNLICENSED",
"dependencies": {
"#zeit/next-sass": "^1.0.1",
"#zeit/next-typescript": "^1.1.1",
"axios": "^0.18.0",
"decko": "^1.2.0",
"next": "^8.0.4-canary.10",
"next-routes": "^1.4.2",
"node-sass": "^4.11.0",
"ramda": "^0.26.1",
"ramda-adjunct": "^2.17.0",
"react": "^16.7.0",
"react-adopt": "^0.6.0",
"react-dom": "^16.7.0",
"react-ga": "^2.5.7",
"react-redux": "^6.0.0",
"react-transition-group": "^2.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styled-components": "4.0.3",
"tslint": "^5.12.1",
"tslint-react": "^3.6.0",
"typescript": "^3.2.4",
"waait": "^1.0.2"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.3.0",
"#babel/preset-typescript": "^7.1.0",
"#types/enzyme": "^3.1.15",
"#types/jest": "^23.3.13",
"#types/next": "^7.0.6",
"#types/ramda": "^0.25.49",
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"#types/react-redux": "^7.0.1",
"#types/styled-components": "4.0.3",
"#types/zeit__next-typescript": "^0.1.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"babel-plugin-sass-vars": "^0.2.1",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"jest": "^24.1.0"
},
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"transform": {
".*": "babel-jest",
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "babel-jest",
"^.+\\.tsx?$": "babel-jest"
},
"moduleFileExtensions": [
"js",
"json",
"ts",
"tsx"
],
"modulePaths": [
"<rootDir>/components/",
"<rootDir>/pages/",
"<rootDir>/shared/"
]
}
}

Looks like you accidentally renamed jest.setup.js to jest.config.js in this commit.
Change it back to jest.setup.js and it should work.
Details
jest.config.js is a special file that is used to set Jest configuration options.
enzyme configuration is typically done in a setupTestFrameworkScriptFile file for older versions of Jest or setupFilesAfterEnv for newer versions of Jest.
Your package.json has setupTestFrameworkScriptFile set to jest.setup.js.
Based on that info I suspected that maybe jest.setup.js got accidentally renamed, and was able to find the commit where it happened in the repo history.

Related

Web3-react Error Module parse failed: Unexpected token You may need an appropriate loader to handle this file type. web3-react/walletconnect

When I try to integrate web2-react/walletconnect-connector with web3-react using web3-react/core. Other wallets like portis, metamask, fortmatic and few other are working properly but when I use wallet-connector or walletlink it is giving the error.
I used this code web3-react github repo.
Getting runtime error.
Provider
import {
Web3ReactProvider,
} from '#web3-react/core';
import { Web3Provider } from '#ethersproject/providers';
function getLibrary(provider: any) {
const library = new Web3Provider(provider);
library.pollingInterval = 12000;
return library;
}
ReactDOM.render(
<Web3ReactProvider getLibrary={getLibrary} >
<Start />
</Web3ReactProvider>,
document.getElementById('root') as HTMLElement
);
Connector code
import { WalletConnectConnector } from '#web3-react/walletconnect-connector';
export const walletconnect = new WalletConnectConnector({
rpc: { 1: 'https://mainnet.infura.io/v3/84842078b09946638c03157f83405213' },
qrcode: true,
});
Here is the Error
./node_modules/eth-json-rpc-filters/node_modules/pify/index.js
Module parse failed: Unexpected token (44:2)
You may need an appropriate loader to handle this file type.
| errorFirst: true,
| promiseModule: Promise,
| ...options
| };
Package Json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^2.1.1",
"#ethersproject/keccak256": "^5.4.0",
"#ethersproject/providers": "^5.4.5",
"#ethersproject/units": "^5.4.0",
"#metamask/detect-provider": "^1.2.0",
"#web3-react/abstract-connector": "^6.0.7",
"#web3-react/authereum-connector": "^6.2.0",
"#web3-react/core": "^6.1.9",
"#web3-react/fortmatic-connector": "^6.1.6",
"#web3-react/frame-connector": "^6.0.9",
"#web3-react/injected-connector": "^6.0.7",
"#web3-react/lattice-connector": "^6.1.9",
"#web3-react/ledger-connector": "^6.1.9",
"#web3-react/network-connector": "^6.1.9",
"#web3-react/portis-connector": "^6.1.9",
"#web3-react/squarelink-connector": "^6.1.9",
"#web3-react/torus-connector": "^6.1.9",
"#web3-react/trezor-connector": "^6.1.9",
"#web3-react/walletconnect-connector": "^6.2.4",
"#web3-react/walletlink-connector": "^6.2.5",
"antd": "^3.4.1",
"async-redis": "^2.0.0",
"bootstrap": "^5.1.0",
"bscscan-api": "^1.0.1",
"chessboardjs": "^0.0.1",
"dotenv": "^4.0.0",
"ethers": "^5.4.6",
"express": "^4.16.3",
"husky": "^7.0.2",
"immutable": "^3.8.2",
"lint-staged": "^11.1.2",
"node-cron": "^3.0.0",
"node-schedule": "^1.3.0",
"nodemon": "^2.0.13",
"normalize.css": "^8.0.0",
"prettier": "^2.3.2",
"react": "^16.3.1",
"react-copy-to-clipboard": "^5.0.4",
"react-countdown-circle-timer": "^2.5.4",
"react-dom": "^16.3.1",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts-ts": "^2.15.1",
"react-spring": "^9.2.5",
"react-toastify": "^8.0.3",
"redis": "^2.8.0",
"shortid": "^2.2.8",
"socket.io": "^2.1.0",
"socket.io-client": "^2.1.0",
"toasted-notes": "^3.2.0",
"web3": "^1.6.0"
},
"scripts": {
"start": "react-scripts-ts start",
"server": "server/index.js",
"nodemon": "nodemon server/index.js",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject",
"create:component": "./node_modules/hygen/lib/bin.js component create",
"create:store:item": "./node_modules/hygen/lib/bin.js store create",
"heroku-postbuild": "yarn run build"
},
"jest": {
"moduleNameMapper": {
"^react-native$": "react-native-web",
"#App/(.*)": "<rootDir>/src/$1"
}
},
"devDependencies": {
"#types/history": "^4.6.2",
"#types/jest": "^22.2.2",
"#types/node": "^9.6.2",
"#types/react-dom": "^16.0.4",
"typescript": "^2.9.2"
}
}
I'm tried for about 3 days but still no luck . Please help me with this.
It was able to work again after downgrading one below version for them.
i'm in vue project, and build/webpack.base.conf.js add
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client'),
resolve('node_modules/web3-eth-accounts/lib'),
resolve('node_modules/web3-core-helpers/lib'),
resolve('node_modules/web3-eth-contract/lib'),
resolve('node_modules/web3-core-method/lib')
]
},
the error reason is web3.js syntax not support {...options, ...otherOptions}, it is
Object.assing(options, {
a: 'xxx',
b: 'xxx
})

How to resolve jest error when attempting to run test suite?

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.

undefined is not an object (evaluating 'Component.propTypes') - React Native 0.61.5

I have upgraded the existing react native project from react native 0.59.6 to 0.61.5.
react-native upgrade command not working. So I have done the manual upgrade using upgrade helper. Resolved some post issues. Now project build success.
But After rendering into the ios emulator from Xcode, it is giving the following error.
I am not using Component.propTypes anywhere. package.lock.json have some packages with prop-types. I am not sure what it is doing exactly. Otherwise, inside my project, I am not using
prop-types also. Please find my package.lock.json below,
package.lock.json
...
...
...
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
},
....
"react": {
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
"integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
}
},
....
package.json
{
"name": "wasfat",
"version": "1.0.3",
"private": true,
"rnpm": {
"assets": [
"app/assets/fonts/corbel"
]
},
"scripts": {
"prepare-repository": "npm i -g react-native-cli yarn;yarn install; react- native link",
"emulator": "emulator -avd Nexus5V6L23_x86_64 -scale 1.0",
"clean": "watchman watch-del-all && npm cache clean && cd android && ./gradlew clean && cd ..",
"test": "jest",
"postinstall": "rm -rf node_modules/react-native-twitter-signin/node_modules",
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"lint": "eslint ."
},
"dependencies": {
"jetifier": "^1.6.5",
"react": "16.9.0",
"react-native": "^0.61.5",
"react-native-actionsheet": "^2.4.2",
"react-native-android-keyboard-adjust": "^1.2.0",
"react-native-aws3": "0.0.8",
"react-native-deep-linking": "^2.2.0",
"react-native-device-info": "^5.3.1",
"react-native-double-tap": "^1.0.1",
"react-native-drawer": "^2.5.1",
"react-native-elements": "^1.0.0",
"react-native-exception-handler": "^2.10.8",
"react-native-fbsdk": "^1.1.0",
"react-native-firebase": "^5.5.6",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-signin": "^1.2.3",
"react-native-hide-with-keyboard": "^1.2.0",
"react-native-image-crop-picker": "^0.25.3",
"react-native-image-picker": "^0.28.1",
"react-native-image-slider": "^2.0.3",
"react-native-image-view": "^2.1.5",
"react-native-keyboard-avoiding-view": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-keyboard-aware-view": "0.0.14",
"react-native-keyboard-listener": "^1.1.0",
"react-native-modal": "^11.1.0",
"react-native-paper": "^2.15.0",
"react-native-picker-select": "^6.2.0",
"react-native-popup-menu": "^0.15.6",
"react-native-progress": "^3.6.0",
"react-native-read-more-text": "^1.1.0",
"react-native-responsive-image": "^2.3.1",
"react-native-responsive-screen": "^1.2.1",
"react-native-s3-upload": "0.0.12",
"react-native-share": "^1.2.1",
"react-native-side-drawer": "^1.1.9",
"react-native-side-menu": "^1.1.3",
"react-native-simple-toast": "0.0.8",
"react-native-snap-carousel": "^3.8.0",
"react-native-swiper-flatlist": "^1.0.10",
"react-native-twitter-signin": "^1.1.1",
"react-native-vector-icons": "^6.6.0",
"react-native-video": "^4.4.4",
"react-native-video-controls": "^2.2.3",
"react-native-video-player": "^0.10.0",
"react-native-view-more-text": "^2.1.0",
"react-navigation": "^3.3.0",
"react-redux": "^7.1.0",
"react-spinkit": "^3.0.0",
"redux": "^4.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
I have found this https://reactjs.org/warnings/dont-call-proptypes.html regarding this issue. But I am not sure how to use it. Because according to this. some third party libraries using propTypes directly. But how to handle it?
There is no help in 0.61 version Github issues. Please suggest some workarounds for this issue.
Thanks for any help.

Babel module build failed when passing multiple presets into create-react app package.json

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

JEST and ES6 import - root folder based imports does not working

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.

Categories

Resources