I'm trying to run some jest tests but keep getting the error:
'jest' is not recognized as an internal or external command, operable program or batch file.
Here is my package.json, can anyone please help get my test framework setup?
{
"name": "lac-react",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^9.0.8",
"gulp": "^3.8.11",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.7",
"gulp-react": "^3.0.1",
"gulp-rename": "^1.2.2",
"gulp-streamify": "0.0.5",
"gulp-uglify": "^1.2.0",
"gulp-watch": "^4.2.4",
"reactify": "^1.1.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.2.1"
},
"jest": {
"scriptPreprocessor": "./preprocessor.js",
"unmockedModulePathPatterns": [
"react"
],
"testPathDirs": [
"./src/components/__tests__/"
]
},
"dependencies": {
"moment": "^2.10.2",
"react": "^0.13.2",
"react-datepicker": "^0.6.2",
"react-message": "^1.3.0",
"react-router": "^0.13.3",
"react-skylight": "^0.2.0",
"superagent": "^1.2.0",
"react": "*",
"react-tools": "*",
"jest-cli": "*"
}
}
Looking closer at the errors, I had this:
error MSB8020: The build tools for Visual Studio 2010 (Platform Toolset = 'v100') cannot be found. To build using the v100 build tools, p lease install Visual Studio 2010 build tools.
I fixed this with adding the version of the build tools when doing an npm install:
--msvs_version=2013
All works fine now.
You can also fix this by adding a system variable
Install jest-cli. It worked for me.
Just npm i jest-cli
Test script should remain same "jest
Related
Im building a crossplatform monorepo application for Web, Android and iOS from this example https://github.com/brunolemos/react-native-web-monorepo and when I added React Native Base to my project I changed my config-overrides.js according to this guide https://docs.nativebase.io/docs/GetStarted.html for Web
But after that I got
SyntaxError: C:\Users\maksi\Desktop\ecmsk\node_modules\native-base\node_modules\react-native-vector-icons\lib\create-icon-set-from-fontawesome5.js: Support for the experimental syntax 'classProperties' isn't currently enabled error.
I tried adding loose option to #babel/plugin-proposal-class-properties plugin but that didn't work. And I also tried adding plugins to my package.json and that didn't work either.
package.json
{
"name": "web",
"version": "0.0.1",
"private": true,
"dependencies": {
"#types/history": "^4.7.2",
"#types/js-cookie": "^2.2.2",
"#types/react": "^16.8.23",
"#types/react-redux": "^7.1.1",
"#types/redux-api-middleware": "^3.0.1",
"connected-react-router": "^6.5.2",
"history": "^4.9.0",
"js-cookie": "^2.2.0",
"native-base": "^2.13.4",
"react": "16.8.4",
"react-art": "^16.8.6",
"react-dom": "16.8.4",
"react-native-elements": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.10.0",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-scripts": "2.1.8",
"redux": "^4.0.4",
"redux-api-middleware": "^3.0.1"
},
"scripts": {
"compile": "tsc -b",
"prestart": "npm run compile",
"start": "concurrently \"npm run compile -- -w\" \"npm run _start\"",
"_start": "react-app-rewired start",
"prebuild": "npm run compile",
"build": "react-app-rewired build",
"pretest": "npm run compile",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"babel-plugin-react-native-web": "^0.11.5",
"concurrently": "*",
"customize-cra": "^0.4.1",
"react-app-rewired": "^2.1.3",
"typescript": "*"
}
}
config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
babelInclude,
addBabelPlugins
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
"react-native": "react-native-web"
}),
babelInclude([
path.resolve('src'),
path.resolve('../components/src'),
path.resolve('../../node_modules/native-base-shoutem-theme'),
path.resolve('../../node_modules/react-navigation'),
path.resolve('../../node_modules/react-native-easy-grid'),
path.resolve('../../node_modules/react-native-drawer'),
path.resolve('../../node_modules/react-native-safe-area-view'),
path.resolve('../../node_modules/react-native-vector-icons'),
path.resolve('../../node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('../../node_modules/react-native-web'),
path.resolve('../../node_modules/react-native-tab-view'),
path.resolve('../../node_modules/static-container'),
]),
addBabelPlugins(
"#babel/plugin-proposal-class-properties"
),
);
The problem might be the included paths. In my case I have it this way:
babelInclude([
path.resolve('node_modules/react-native-typing-animation'),
path.resolve('src')
])
Paths are relative to the config.overrides file.
I am getting a persistent Jest error whenever I use npm to install my dependencies on the server side. Using yarn to install the same dependencies works, but I am currently working on a team where we're all using npm. I have tried all of the proposed solutions on Stack Overflow, upvoted or not, and none have worked for me. The two senior devs I've asked so far don't think there is anything in my globally installed npm packages that would cause this.
I get this error for every Jest test suite I run:
● Test suite failed to run
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error tolook for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel.
at throwVersionError (node_modules/#babel/helper-plugin-utils/lib/index.js:65:11)
at Object.assertVersion (node_modules/#babel/helper-plugin-utils/lib/index.js:13:11)
at _default (node_modules/#babel/plugin-proposal-decorators/lib/index.js:35:7)
at node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at Function.memoisePluginContainer (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13) at Function.normalisePlugin (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32) at ../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
at Array.map (<anonymous>)
at Function.normalisePlugins (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (../../../node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (../../../node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (../../../node_modules/babel-core/lib/transformation/pipeline.js:46:16)
This is what my package.json looks like:
{
"name": "nanny-now",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest --verbose --runInBand",
"test:watch": "npm run test -- --watch",
"build": "babel src -d lib -s true",
"start": "node lib/index.js",
"start:watch": "nodemon src/index.js --exec babel-node"
},
"jest": {
"testEnvironment": "node"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.2.0",
"#babel/node": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.6",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"chance": "^1.0.18",
"eslint": "^5.9.0",
"eslint-plugin-babel": "^5.3.0",
"jest": "^23.6.0",
"nodemon": "^1.18.7",
"supertest": "^3.3.0"
},
"dependencies": {
"bcryptjs": "^2.4.3",
"dotenv": "^6.2.0",
"express": "^4.16.4",
"jsonwebtoken": "^8.4.0",
"mongoose": "^5.3.14",
"morgan": "^1.9.1",
"regenerator-runtime": "^0.13.1"
}
}
Here is my .babelrc file:
{
"presets": [
"#babel/preset-env"
],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"decoratorsBeforeExport": true
}
],
"#babel/plugin-proposal-class-properties"
]
}
As George Artemiou says, this error occurs because you are using Babel 7 in your project, while jest still uses Babel 6.
I had the same issue, and I solved it by installing babel-core#^7.0.0-bridge.0
See also:
https://github.com/babel/babel-bridge
The problem is with jest dependencies. I had the same issue and resolved it by adding the step below to my package.json file
"scripts": {
...
"postinstall": "rimraf node_modules/jest-runtime/node_modules/babel-core node_modules/jest-config/node_modules/babel-core",
...
}
Hope this helps..
I'm trying to use express library in main.js file. It works fine on my dev build, but when I package the app I get
Error: Cannot find module 'express'
I'm not quite sure how electron main thread works, is it packaged separately by some other build tool, and do I need to define(include) package manually? My app is packaged by webpack, and I have included libraries in package.json. Every sample I have found just includes express library and moves on, I can't find any additional steps for this.
package.json
{
"name": "basic-electron-react-boilerplate",
"version": "0.7.0",
"description": "Minimal and modern react+electron+webpack boilerplate",
"author": "Phillip Barbiero",
"homepage": "https://github.com/pbarbiero/basic-electron-react-boilerplate",
"repository": {
"type": "git",
"url": "https://github.com/pbarbiero/basic-electron-react-boilerplate.git"
},
"build": {
"appId": "your.id",
"mac": {
"category": "your.app.category.type"
}
},
"license": "MIT",
"main": "main.js",
"scripts": {
"prod": "webpack --config webpack.build.config.js && electron --noDevServer .",
"test": "node test.js",
"dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
"build": "webpack --config webpack.build.config.js",
"package": "webpack --config webpack.build.config.js",
"postpackage": "electron-packager ./ --out=./builds",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-es2017": "^7.0.0-beta.53",
"#babel/preset-react": "^7.0.0",
"babel-core": "^6.24.1",
"babel-loader": "^8.0.4",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"body-parser": "^1.18.3",
"css-loader": "^0.28.1",
"electron": "^1.7.8",
"electron-builder": "^20.28.4",
"electron-packager": "^9.1.0",
"express": "^4.16.4",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.28.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"request": "^2.88.0",
"style-loader": "^0.19.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"electron-fetch": "^1.2.1",
"electron-require": "^0.3.0",
"express": "^4.16.4",
"faker": "^4.1.0",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"rc-time-picker": "^3.4.0",
"react-async-script-loader": "^0.3.0",
"react-dropdown": "^1.6.2",
"react-places-autocomplete": "^7.2.0",
"request": "^2.88.0",
"resolve-url-loader": "^3.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.82.5",
"styled-components": "^4.0.2"
}
}
You can run Express server inside Electron. Here is a sample repo for running express inside Electron.
You can fork a child process to run express app as follows
app = require("electron").remote.app),
node = require("child_process").fork(
`${app.getAppPath()}/express-app/bin/www`,
[],
{
stdio: ["pipe", "pipe", "pipe", "ipc"]
});
The express app used here is a generated one using express-generator.
The problem with your approach is that you are maintaining a single package.json file for both Electron and Express. Checkout Electron-React-Boilerplate, here i have two separate npm installation locations one is for Electron alone and other is for React stuffs. Electron-packager and Electron-builder works using this pattern. This is the reason why your process on main thread throws
Error: Cannot find module 'express'
There are a handful of other questions on here, but none that seem to be the same problem.
Running npm install on a preexisting package.json, pulled in from git, does all of its processing, creates a node_modules directory, then ends without installing the modules. node_modules is empty, and there were no errors (just a couple warnings about deprecated modules). The entire directory is owned by the active user.
After a bunch of messing around, I've found that if I remove all of the devDependencies, the normal dependencies will install as expected.
OS: Ubuntu 16.04
Node: 6.9.1
NPM: 3.10.8
package.json:
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --ignore src --ignore public --ignore views",
"test": "node ../app.js"
},
"author": "xxx",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.5.1",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"chalk": "^1.1.3",
"event-stream": "^3.3.4",
"fs-extra": "^1.0.0",
"git-guppy": "^1.2.1",
"glob": "^7.1.1",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.2",
"gulp-duration": "0.0.0",
"gulp-filter": "^4.0.0",
"gulp-function": "^2.2.0",
"gulp-git": "^1.12.0",
"gulp-livereload": "^3.8.1",
"gulp-notify": "^2.2.0",
"gulp-postcss": "^6.2.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"guppy-pre-commit": "^0.4.0",
"postcss-cssnext": "^2.8.0",
"postcss-math": "0.0.5",
"precss": "^1.4.0",
"q": "^1.4.1",
"utils-merge": "^1.0.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
},
"dependencies": {
"axios": "^0.15.2",
"dotenv": "^2.0.0",
"express": "^4.14.0",
"fs": "0.0.1-security",
"git-rev-sync": "^1.8.0",
"pug": "^2.0.0-beta6",
"yamljs": "^0.2.8"
}
}
This is running on a basic DO server, the same distribution I've spun up for a dozen other projects, with no problem. The only thing I can think of is if there's something within one of the devDependencies that is clogging things up. How to debug this?
It appears that "fs" is not a valid npm package. I came to this conclusion after running this command:
npm bugs fs
This ended up displaying bugs filed against a npm/security-holder package. It appears that the "fs" on NPM may have been malicious.
If you want node's fs package, you don't need an entry in your package.json for that, fs is built-in.
Preface: I am new to Javascript, Babel and React-Native.
I have been developing my app using the TodoMVC example from the relay source. I was wondering if it's possible to get React-Native + Relay to work together easily?
I setup my babelRelayPlugin and added it to my .babelrc. I installed the npm packages for "react-relay":"^0.7.3" and "babel-relay-plugin": "^0.7.3" but after running "npm install" and "react-native start" I either get an error saying "Unrecognized module 'react-relay'" OR "Relay is not defined".
From reading this thread and looking at the last comment ( https://github.com/facebook/relay/issues/26#issuecomment-194570137 ) it looks like at the moment I should just use TodoMVC as my base for new React-Native + Relay projects.
Is this correct?
Here is my .babelrc
{
"env": {
"development": {
"passPerPreset": true,
"presets": [
{
"plugins": [
"./plugins/babelRelayPlugin"
]
},
"react-native"
]
},
"server": {
"plugins": [
"./plugins/babelRelayPlugin"
],
"presets": [
"es2015",
"stage-0"
]
}
}
}
Here is my package.json
{
"name": "testApp",
"version": "1.0.0",
"private": true,
"scripts": {
"clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
"postinstall": "npm run clean:babelrc",
"start": "BABEL_ENV=server babel-node ./server.js",
"update-schema": "babel-node ./scripts/updateSchema.js"
},
"dependencies": {
"babel-preset-es2015": "^6.5.0",
"babel-preset-react-native": "^1.5.1",
"babel-preset-stage-0": "^6.5.0",
"babel-relay-plugin": "^0.7.3",
"express": "4.13.4",
"express-graphql": "0.4.9",
"graphql": "0.4.17",
"graphql-relay": "0.3.6",
"moment": "^2.12.0",
"node-fetch": "^1.4.1",
"react": "^0.14.5",
"react-native": "^0.22.2",
"react-native-animatable": "^0.5.2",
"react-native-aws3": "0.0.1",
"react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
"react-native-console-panel": "0.0.7",
"react-native-contacts": "^0.2.3",
"react-native-keyboard-aware-scroll-view": "0.0.6",
"react-relay": "^0.7.3",
"sync-request": "^3.0.0",
"uuid-v4": "^0.1.0"
},
"devDependencies": {
"babel-cli": "^6.6.4",
"flow-bin": "^0.22.1"
},
"engines": {
"npm": ">=3"
}
}
I managed to fix the issue. I added "babel-core": "^6.7.6" as a dev dependency. Removed all the scripts and cloned the project from git to a new folder. Everything runs perfectly now!