Jest - Unknow "preset" - "jest-react-native" - react-native

I'm using the following package.json (according to http://facebook.github.io/jest/docs/tutorial-react-native.html#content):
{
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
},
"dependencies": {
"react": "^15.3.1",
"react-native": "0.31.0",
},
"devDependencies": {
"babel-jest": "^14.1.0",
"babel-preset-react-native": "^1.9.0",
"jest": "^14.1.0",
"jest-cli": "^13.1.0",
"jest-react-native": "^14.1.3",
"react-test-renderer": "^15.3.1"
},
"jest": {
"globals": {
"__DEV__": true,
"__RCTProfileIsProfiling": false
},
"preset": "jest-react-native"
}
}
But I get the error:
Error: Unknown config option "preset" with value "jest-react-native". This is either a typing error or another user mistake and fixing it will remove this message.
Using Jest CLI v13.2.3, jasmine2, babel-jest
FAIL __tests__/AuthorRequest-test.js (0s)
● Runtime Error
- Error: Cannot find module 'throwOnWrongReactAPI' from 'react-native.js'
at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/build/index.js:197:17)
at eval (node_modules/react-native/Libraries/react-native/react-native.js:180:26)
at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native.js:189:4)
1 test suite failed, 0 tests passed (0 total in 1 test suite, run time 2.238s)
npm ERR! Test failed. See above for more details.
my .babelrc file contains:
{
"presets": ["react-native"]
}

I have a feeling that you are using a wrong version of Jest. You have:
"jest": "^14.1.0",
"jest-cli": "^13.1.0"
But it seems you have 13.2.3installed using npm -g:
Using Jest CLI v13.2.3, jasmine2, babel-jest
First of all, I think you can remove jest-cli and just use jest 14.1.0.
Then you can update your test script like:
"scripts": {
"test": "./node_modules/jest/bin/jest.js"
}
In this way, you make sure you run the local Jest copy of your project, so it should say now:
Using Jest CLI v14.1.0, jasmine2, babel-jest
Doing that and following the official docs you posted, it should be everything you need (Can't say for sure since you did not post the test code).

Related

Getting Postcss warning without using it

I'm getting this Postcss warning:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. (repeated 19 times)
But I'm not using it. It's very annoying because, as you can see, the message is repeated several times.
I know why I'm getting the error (I don't have a Postcss config file or any plugins, stringifiers, etc, set) but I don't know why is Postcss installed in first place.
This is my package.json
{
"name": "vip-english-website",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#dzangolab/vue-accordion": "^1.2.0",
"#nuxtjs/axios": "^5.13.6",
"express": "^4.17.1",
"googleapis": "^91.0.0",
"vue-carousel": "^0.18.0",
"vue-check-view": "^0.3.0",
"vue-gapi": "^2.0.0",
"vue-js-modal": "^2.0.1",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"#nuxtjs/google-fonts": "^1.3.0",
"core-js": "^3.19.1",
"nuxt": "^2.15.8",
"nuxt-windicss": "^2.0.12"
}
}
Do anyone have any idea?
Is been 3 days of troubleshooting this error, finally the solution in the github discussion works for me.
I'm using the following dependencies
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
"axios": "^0.27.2",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
Github Issue - Allow to disable "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js
In nuxt.config.js, under the build options, add the following as shown below. That worked for me.
build: {
postcss: null,
}
Hope it helps
PostCSS is a dependency of Nuxt. You can use npm ls {package_name} command in your project directory, to view package dependencies tree.
Issue was fixed in recent PostCSS release: https://github.com/postcss/postcss/issues/1375 , but Nuxt probably will update it only on next big release (v3).
just add to nuxt.config.js
build: {
postcss: null,
loaders: {
vue: {
prettify: false
}
}
}
I'm using nuxt 2.15.8 & having the same issue.
The following command & config will supress the warning.
npm i -D #nuxt/postcss8 #nuxtjs/style-resources
In nuxt.config.js, edit/add:
buildModules: [
'#nuxtjs/style-resources',
'#nuxt/postcss8',
],
build: {
postcss: {
plugins: {
},
preset: {
}
}
}
In my case using Nuxt, I not only needed to add the following code to the Nuxt config to disable the warning, but also to actually make the autoprefixer work! (even if the autoprefixer comes by default in Nuxt and a .browserlistrc file exists)
build: {
postcss: {
preset: {
autoprefixer: {
overrideBrowserslist: ['last 3 versions', '> 1%']
}
}
}
}
After a fresh Nuxt install I had the warning, and playing around with newer CSS rules, I noticed that without the above config, filter: grayscale(100%); would not get autoprefixed.
Editing the .browserlistrc file did not help.
For me it solved using npm install inside the project that presented these warnings. Maybe it works for someone else

Installing locally and globally a npm depency produces an error while executing the command line

I am trying to install locally and globally a npm depency by using npm install -g ..
The package.json seems to be ok :
{
"private": true,
...
"main": "dist/main.js",
"bin": {
"gbts": "./dist/main.js"
},
"scripts": {
"build": "tsc"
},
...
"dependencies": {
"minimist": "^1.2.5",
"ora": "^5.1.0",
"ts2c": "^2.2.7",
"yargs": "^16.1.1"
},
"devDependencies": {
"#types/node": "^14.14.10",
"eslint": "6.8.0",
"install": "^0.13.0",
"npm": "^6.14.9",
"tslint": "^5.12.1",
"typescript": "^3.3.3"
}
}
This works perfetly, but when I invoke the command gbts, I still have this error pop in error on windows:
It occurs on the following line :
const parse = require("minimist");
I do not understand why this produce a syntax error, project's dependencies are missing?
Any solution in my case?

Once i create and use own module then it will gives error like: Unable to resolve module

I am new in react-native and I have, for the first time, created my own module(npm).
I have tried to create my own module(npm) for common components and individually it works fine. However once I install, link it in our app, and try to use those components, it gives an error like this:
Unable to resolve module `<Module-name>` from `<file>`: Module `<Module-name>` does not exist in the Haste module map.
(Note: I have tested using Android Emulator only)
I have followed the below steps for module and test app creation
For Module
react-native init <module-name>
Add simple code of component in main index.js
And set pacakge.json like this:
{
"name": "<module-name>",
"version": "0.0.1",
"private": true,
"main": "index.js",
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build": "echo 'build script executed'"
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4"
},
Now I check this component (react-native run-android), it will work fine.
Now I have tried to use in an app with the below steps
For Test App
Create new fresh app (react-native init <app-name>)
Install created npm with full path like;
npm install <full path of component>
Now I try react-native link <full path of component>, I have also tried simple react-native link, but nothing happens.
Now I run app using react-native run-android, however every time it gives the same error like;
Unable to resolve module <created-module name>
test app package.json
{
"name": "<app-name>",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-my-library": "^1.0.2",
"<created-module-name>": "file:../<created-module-name>"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.1.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Created module successfully installed but I think it is not linked properly and it will gives error.
So what is wrong here ?
Please give me suggestion / help.
Thanks.
I am assuming your module is successfully published in npm repository. Otherwise you can not use npm install <full path of component>.
If you are using
npm install <full path of component>
command for installing your module to a Test App from npm repo. Specify in your package.json like
"<created-module-name>": "file:../<created-module-name>"
is wrong. You need to remove that line from your package.json and try to install like;
npm install --save <full path of component>
This will automatically create a line in your package.json. You can now manually link your module.
For manual linking you can follow that guide.
Edited:
If you are using in your local computer,
Then no need to npm install.
Just copy your module into your project node_modules folder.
Then in you package.json add;
"dependencies": {
...
"your_module_name": "your_module_version"
...
}
Then, you just follow the manual linking process that I mentioned above.

testing React Native Application with Jest - Jest encountered an unexpected token

I am try to run jest test case in react native and it always fails. Terminal print this error "Jest encountered an unexpected token". I'm really new to jest, I have tried several hours to solve this problem, but couldn't find a way. Please help me to solve this.
Here is my code: -
import 'react-native';
import React from 'react';
import LoginScreen from '../pages/LoginScreen'
import renderer from 'react-test-renderer';
// snapshot testing
// update snapsshot to use npm test -- -u
// test('MainScreen snapShot', ()=>{
// const snap = renderer.create(
// <MainScreen />
// ).toJSON();
// expect(snap).toMatchSnapshot();
// });
it('fucntion test', () =>{
let MainData = renderer.create(<LoginScreen />).getInstance();
MainData.change(2)
expect(MainData.change(2)).toEqual(20)
})
Package.json :
{
"name": "App_name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-fcm": "^16.0.0",
"react-native-loading-spinner-overlay": "^0.5.2",
"react-native-looped-carousel": "^0.1.13",
"react-native-navigation": "^1.1.469",
"react-native-pathjs-charts": "0.0.34",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.6.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
},
"devDependencies": {
"babel-jest": "23.0.1",
"babel-preset-react-native": "4.0.0",
"jest": "^23.1.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
Error is :
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
15 |
16 | it('fucntion test', () =>{
> 17 | let MainData = renderer.create(<LoginScreen />).getInstance();
| ^
18 | MainData.change(2)
19 |
20 | expect(MainData.change(2)).toEqual(20)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 6.807s
Ran all test suites.
npm ERR! Test failed. See above for more details.
Thanks.
I saw something similar, try creating a .babelrc in the root of your project with this:
{
"presets": ["react-native"]
}

How to add Webpack 3.8.1 to a Vue project

say I've go this scaffolding : https://github.com/vuejs/vue-cli
I want to add Webpack 3.8.1 to it.
there's already a "build" folder with lots of webpack files in it :
but (one of) the issue(s) is running "webpack" in the project's root returns :
https://webpack.js.org/concepts/ this si the doc I'm supposed to go by.
there's no real example.
it's got :
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
which I adapted to the best of my ability to :
const path = require('path');
module.exports = {
entry: './src/entry.js',
output: {
path: path.resolve(entry, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
I also added a entry.js file containing nothing under src :
and I edited my package.json file to include:
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^3.2.3",
"style-loader": "^0.19.0",
"extract-text-webpack-plugin": "^3.0.1"
},
"devDependencies": {
"sinon": "^4.0.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
and ran :
npm install
npm update
I feel I'm getting somewhat close but I still cannot manage to use the new webpack.
I put my comment as answer to be able to close this question and (hopefuly) help others future users.
I think that your problem is to try to use webpack, you should use the npm run script like: npm run dev or npm run prod, and then the vue+webpack will do the work for you, placing the files where the config says (webpack.base.dev.conf for instance).
If you take a look at package.json, you could see this part:
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
Every one can be executed with npm run X.
Hope it helps!