Cannot get Jest & React Native working - react-native

Trying to get Jest v12.1.1 working with React Native v0.26.2 I'm getting this error when run npm test:
Error: Cannot find module 'ErrorUtils' from 'env.js'
Here's my package.json. I'm trying to get this working with the default react-native init AwesomeProject starter.
Is there something missing from my package.json? (are here any lines I don't need?)
EXAMPLE 1:
package.json
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^15.0.2",
"react-native": "^0.26.2"
},
"devDependencies": {
"babel-jest": "^9.0.0",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"jest-cli": "^12.1.1"
},
"scripts": {
"test": "jest"
},
"jest": {
"scriptPreprocessor": "node_modules/react-native/jestSupport/preprocessor.js",
"setupEnvScriptFile": "node_modules/react-native/jestSupport/env.js",
"testPathIgnorePatterns": [
"/node_modules/",
"/android/",
"/ios/",
"/.idea/"
],
"testFileExtensions": [
"js"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/"
],
"verbose": true
}
}
Here's a test script.
index.android-test.js
// __tests__/index.android-test.js
'use strict';
jest
.disableAutomock()
.setMock('AwesomeProject', {})
.setMock('React', {Component: class {}});
describe('AwesomeProject', () => {
it('test something', () => {
const testJunk = true;
expect(testJunk).toEqual(true);
});
});
EXAMPLE 2:
I get a different error when I add "haste" to package.json and remove scriptPreprocessor & setupEnvScriptFile.
Error: Cannot find module 'AwesomeProject' from 'index.android-test.js'
I have no clue why I get farther ahead with the following. My previous Example 1 is following:
https://facebook.github.io/jest/docs/tutorial-react.html#content
And Example 2 with 'haste` is following:
https://github.com/fbsamples/f8app/blob/master/package.json
Really confused about why Ex 1 doesn't work.
revised package.json
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^15.0.2",
"react-native": "^0.26.2"
},
"devDependencies": {
"babel-jest": "^9.0.0",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"jest-cli": "^12.1.1"
},
"scripts": {
"test": "jest"
},
"jest": {
"haste": {
"defaultPlatform": "android",
"platforms": [
"ios",
"android"
],
"providesModuleNodeModules": [
"react-native"
]
},
"testPathIgnorePatterns": [
"/node_modules/",
"/android/",
"/ios/",
"/.idea/"
],
"testFileExtensions": [
"js"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/"
],
"verbose": true
}
}

Related

My webpack babel loader is not compiling my javascript code

I have been learning webpack and babel...
All things are working fine but my webpack config is not working as it should, I think something I missed here.
Here are my webpack.config.js code
const path = require('path');
module.export = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename:'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
publicPath:'/assets/'
},
module:{
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['#babel/preset-env']
}
}
}]
}
};
and here are all dev dependencies
{
"name": "chapter-22",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "./node_modules/.bin/webpack src/index.js -o dist/assets/bundle.js --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "Jabid",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"#babel/polyfill": "^7.11.5",
"webpack-dev-server": "^3.11.0"
}
}
problem solved , i mistakenly wrote module.export instead of module.exports.

Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-import' (Vue 2)

I create my first npm package. I published it on npmjs and encountered the error of the lack of the 'postcss-import' module after installing the package in the project and running it. Tell me, where and in which file may the problem be? I tried all the ways and nothing works.Maybe something is wrong with these files?
This is the 'package.json' file of my package
{
"_from": "some_package",
"_inBundle": false,
"_integrity": "sha512-***",
"_location": "/some_package",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "some_package",
"name": "some_package",
"escapedName": "some_package",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/some_package/-/some_package-1.0.1.tgz",
"_shasum": "***",
"_spec": "some_package",
"_where": "/home/user/vue/projects/package_name",
"author": "",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"bundleDependencies": false,
"dependencies": {
"vue": "^2.6.5",
"vue-browser-detect-plugin": "^0.1.5",
"vue-element-resize-event": "^0.1.0"
},
"deprecated": false,
"description": "A Vue.js project",
"devDependencies": {
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.6",
"postcss-url": "^7.2.1"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"license": "ISC",
"main": "src/main.js",
"name": "some_package",
"private": false,
"scripts": {
"build": "node build/build.js",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev"
},
"version": "1.0.8",
"repository": {
"type": "git",
"url": "git+https://github.com/user/some_package.git"
},
"bugs": {
"url": "https://github.com/user/some_package/issues"
},
"homepage": "https://github.com/user/some_package#readme"
}
This is the '.postcssrc.js' file of my package
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
You can try:
npm install --save-dev postcss-import

Trouble with vue-cli: Cannot find module '#babel/preset-env/data/built-ins.json'

Attempting to create a new vue project. I run:
yarn global add #vue/cli
vue create my-project
Then:
cd my-project
yarn serve
Right out of the gate I'm getting an error that I cannot resolve:
Cannot find module '#babel/preset-env/data/built-ins.json
In the auto-generated package.json (below) #babel/preset-env isn't listed as a dev dependency, but I assume it gets added automatically as a dependency of some of the vue stuff? Any idea what is going on?
Here are auto-generated files:
package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.6"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.5.0",
"#vue/cli-plugin-eslint": "^3.5.0",
"#vue/cli-service": "^3.5.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}

How making work eslint-plugin-react-native with Atom?

I try to make the linter work on Atom, but nothing happens :/
(I get used to work with eslint on Atom but for a new React Native project I'm totally stuck ...) I work with linter and linter-eslint packages for Atom.
Thanks for any help :)
Here is my package.json, configured as it is said here:
https://github.com/intellicode/eslint-plugin-react-native
{
"name": "RNApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"eslint": "^3.4.0",
"eslint-plugin-react": "^6.2.0",
"eslint-plugin-react-native": "^2.0.0",
"react": "15.3.1",
"react-native": "0.32.0"
},
"plugins": [
"react",
"react-native"
],
"ecmaFeatures": {
"jsx": true
},
"rules": {
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2
}
}
I had to replace this:
"ecmaFeatures": {
"jsx": true
},
by this:
"eslintConfig": {
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
},

Babel Error: Unknown Option: babelrc.presets

When running tests using Jest, I need my .babelrc file for it to run.
When running npm start, it only works without the .babelrc file, with the error:
Unknown option: C:\...\babelrc.presets
I'm guessing it's to do with the version of babel I have, but I have tried to following "answer" to this question: Unknown option: .../.babelrc.presets
but to no avail.
Here is my package.json:
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "src/app.js",
"author": "x",
"license": "ISC",
"scripts": {
"start": "webpack-dev-server --port 3000",
"test": "jest"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"react",
"react-dom",
"react-addons-test-utils",
"fbjs"
]
},
"devDependencies": {
"babel-core": "^6.7.*",
"babel-jest": "^11.0.2",
"babel-loader": "^5.0.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"jest-cli": "^11.0.2",
"react-addons-test-utils": "^0.14.8",
"webpack": "^1.12.*",
"webpack-dev-server": "^1.10.*"
},
"dependencies": {
"react": "^0.13.3"
}
}
and my .babelrc:
{
"presets": [
"react",
"es2015"
]
}
and my webpack config, if it's relevant:
module.exports = {
entry: [
'./src/app.js'
],
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/
}]
}
};
You've listed babel-core#^6 but are using babel-loader#5, update your babel-loader to the most recent version.
I can work with babel src --out-dir lib, but not with npm run XXX using babel-core#6.20.0 and babel-loader#6.2.9 .While I install Babel-cli#6.18.0 CLI globally on my machine, after I install babel-cli# locally project, it can works with npm run.