I want to use this fetch polyfil so that i can do integration tests on my sdk using jest.
However when i run my tests i get.
/jest.setup.js:2
import 'whatwg-fetch';
^^^^^^^^^^^^^^
SyntaxError: Unexpected string
jest.config.js
// File jest.config.js
module.exports = {
"verbose": true,
setupFiles: ['./jest.setup.js'],
};
jest.setup.js
// File jest.setup.js
import 'whatwg-fetch';
package.json
"scripts": {
"test": "jest"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^4.6.0",
"jest": "^23.6.0",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"whatwg-fetch": "^3.0.0"
}
Related
I am new to webpack and babel. My aim is to write an angularjs directive using ReactJS for rendering. However, when I try to place a react element, webpack converts the element to React.DOM and complains React.DOM is not a function.
ReactDOM.render(<LikeButton />),element[0]); //gets converted to
ReactDOM.render(React.DOM(ListContainer, null), element[0]);
TypeError: **React.DOM** is not a function
package.json
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"exports-loader": "^3.0.0",
"imports-loader": "^3.0.0",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2"
},
"dependencies": {
"angular": "1.5.3",
"angular-animate": "1.5.3",
"angular-resource": "1.5.3",
"angular-sanitize": "1.5.3",
"angular-ui-bootstrap": "^1.3.3",
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
}
.babelrc -
{"presets": ["#babel/preset-env", "#babel/preset-react"]}
Any help would be appreciated
Image
For whoever is looking for answer here. I was using /** #jsx React.Dom */ with newer version of react. Once I remove this, everything works magically. This post from https://github.com/babel/babelify/issues/180 helped.
As the title describes I am having an issue getting ESLint to run in my React project.
$ npx eslint **/*.js
Unexpected token {
package.json
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.1.0",
"eslint": "^7.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
.eslintrc
{
"parser": "babel-eslint"
}
Your package.json should be an object
{
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.1.0",
"eslint": "^7.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
As stated in the Installation and Usage section of the npm package, there's a node.js version prerequisite for the eslint script to run.
You can check your node version by running node --version.
If you find you've got an unsupported node version, if figure you may consider switching to a higher node version or a lower eslint package version. E.g.: eslint#6.8.0
Run with Android
All packages have been linked successfully.
I have tried
$ ./gradlew clean #in android folder
$ react-native start
$ react-native run-android
then jest that show error
Invariant Violation: Native module cannot be null
$ jest
FAIL __tests__/SignInScreen-test.js
● Test suite failed to run
Invariant Violation: Native module cannot be null.
at invariant (node_modules/invariant/invariant.js:40:15)
at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:37:7)
at Object.<anonymous> (node_modules/react-native-reanimated/src/ReanimatedEventEmitter.js:4:16)
at Object.<anonymous> (node_modules/react-native-reanimated/src/core/AnimatedCall.js:2:1)
console.group node_modules/redux-logger/dist/redux-logger.js:1
action persist/PERSIST # 05:17:04.459
console.log node_modules/redux-logger/dist/redux-logger.js:1
prev state {
authReducer: {
...
How can i fix this error or there are solutions to test React native app like Jest?
jestSetupFile.js
import mockAsyncStorage from '#react-native-community/async-storage/jest/async-storage-mock';
jest.mock('#react-native-community/async-storage', () => mockAsyncStorage);
jest.mock('react-native-keychain', () => ({
SECURITY_LEVEL_ANY: 'MOCK_SECURITY_LEVEL_ANY',
SECURITY_LEVEL_SECURE_SOFTWARE: 'MOCK_SECURITY_LEVEL_SECURE_SOFTWARE',
SECURITY_LEVEL_SECURE_HARDWARE: 'MOCK_SECURITY_LEVEL_SECURE_HARDWARE',
setGenericPassword: jest.fn().mockResolvedValue(),
getGenericPassword: jest.fn().mockResolvedValue(),
resetGenericPassword: jest.fn().mockResolvedValue(),
}));
package.json
"jest": {
"preset": "react-native",
"setupFiles": [
"./jestSetupFile.js"
]
},
SignInScreen-test.js
import {SignInScreen} from '../screens/SignInScreen';
describe('Test Component using hooks', () => {
test('SignInScreen', () => {
expect(<SignInScreen />).toMatchSnapshot();
});
});
This is more detail about my package.json
"dependencies": {
"#react-native-community/async-storage": "^1.7.1",
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/bottom-tabs": "^5.0.0-alpha.34",
"#react-navigation/native": "^5.0.0-alpha.24",
"#tradle/react-native-http": "^2.0.0",
"buffer": "^4.9.1",
"crypto": "^1.0.1",
"events": "^1.0.0",
"fast-deep-equal": "^3.1.1",
"http": "^0.0.0",
"https": "^1.0.0",
"https-browserify": "~0.0.0",
"perf_hooks": "0.0.1",
"performance": "^1.2.0",
"react": "16.11.0",
"react-native": "0.62.1",
"react-native-camera": "^3.15.1",
"react-native-charts-wrapper": "^0.5.7",
"react-native-crypto": "^2.1.0",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "^1.6.0",
"react-native-keychain": "^4.0.5",
"react-native-paper": "^3.4.0",
"react-native-permissions": "^2.0.9",
"react-native-qrcode-scanner": "^1.3.1",
"react-native-qrcode-svg": "^6.0.3",
"react-native-randombytes": "^3.0.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.1.0",
"react-native-svg": "^11.0.1",
"react-native-swiper": "^1.6.0-nightly.5",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-material-bottom-tabs": "^2.1.5",
"react-navigation-stack": "^2.0.13",
"react-redux": "^7.1.1",
"readable-stream": "1.0.33",
"redux": "^4.0.4",
"redux-persist": "^6.0.0",
"request-promise": "^4.2.5",
"rn-nodeify": "^10.2.0",
"stellar-sdk": "^3.3.0",
"stream": "^0.0.2",
"stream-browserify": "^1.0.0",
"url": "~0.10.1",
"util": "~0.10.3",
"vm": "^0.1.0",
"vm-browserify": "0.0.4"
},
"devDependencies": {
"#babel/core": "7.6.4",
"#babel/runtime": "7.6.3",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "^25.2.6",
"eslint": "6.6.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.9.0",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native",
"setupFiles": [
"./jestSetupFile.js"
]
},
I had a similar issue and found the solution here. Additionally, I had to include an extra dependency on the "transformIgnorePatterns" node in the package.json
When running a unit test with Mocha we are getting the following token exception which points to Babel not transpiling.
node_modules/expo/src/Expo.js:2
import './environment/validate';
^^^^^^
SyntaxError: Unexpected token import
The mocha test points to a file that imports Constants from expo
import { Constants } from 'expo'
const config = Constants.manifest.extra
This is how the mocha opts and babel are configured
test/mocha.opts
--recursive
--require babel-register
.babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Dependencies
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^7.2.3",
"chai": "^4.1.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"jest-expo": "^24.0.0",
"mocha": "^5.0.0",
"react-native-scripts": "1.0.0",
"react-test-renderer": "16.0.0-alpha.6",
"rimraf": "^2.6.2",
"sinon": "^4.2.0"
},
"dependencies": {
"axios": "^0.16.2",
"dot-object": "^1.7.0",
"expo": "^24.0.0",
"google-libphonenumber": "^3.0.5",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"moment": "^2.19.3",
"prop-types": "^15.5.10",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
"react-native-google-places-autocomplete": "^1.3.6",
"react-native-modal": "^4.1.1",
"react-native-modal-datetime-picker": "^4.12.0",
"react-native-swipeable": "^0.6.0",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "^1.0.0-beta.21",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.15.3",
"redux-thunk": "^2.2.0",
"styled-components": "^2.0.1"
}
}
We are running
yarn mocha
I just faced a similar error - many of my suites would break after I used Expo.AuthSession in a single file.
I fixed my issue by adding
jest.mock('expo', () => ({
AuthSession: {
getRedirectUrl: jest.fn(),
},
}));
to my global mock file.
I have installed the necessary plugins for babel
{
"name": "myproject",
"version": "1.0.0",
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-plugin-mjsx": "^4.1.1",
"babel-plugin-transform-es2015-modules-amd": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"gulp": "^3.9.1",
"http-server": "^0.9.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-router": "^2.6.0",
"typescript": "^2.1.0-dev.20160725",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"babel": {
"plugins": [ "transform-es2015-modules-amd" ]
}
}
to support the transform as in package.json file
"babel-plugin-transform-es2015-modules-amd": "^6.8.0",
and
"babel": {
"plugins": [ "transform-es2015-modules-amd" ]
}
added to prevent the errors coming from index.js file which has
Blockquote
import React from 'react' file
it is the only place which um using import
Um trying to create MVC45 reactjs project with react routing though now um getting the following error
Blockquote
Uncaught Error: Module name "react" has not been loaded yet for context: _. Use require([])
what could possibly go wrong here ?
Some suggests to place the transcompiler plugin in .bablrc file but I could not find it in the solution