I created a new React Native project and used Jest testing, it goes very well. But when I try it in an existing app it couldn't work, instead it gave me the following error.I suspect it is a configuration error that caused this problem:
Error
SyntaxError: Unexpected token 'export'
4 | //Import React
5 | import React, {useEffect, useState} from 'react';
> 6 | import { StackActions, NavigationActions } from 'react-navigation';
| ^
7 | import {useSelector, useDispatch} from 'react-redux';
8 | import {changeVoucherCategory} from '../../../actions';
9 | //Import all required component
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/Screen/drawerScreens/Profile/ProfileScreen.js:6:1)
Below are some of my files
package.json
{
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "react-scripts start",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build:ios": "react-native bundle --entry-file='index.ios.js' --bundle-output='./ios/IGBFAMILY/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
},
"dependencies": {
"#babel/runtime": "^7.14.0",
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/cli-platform-ios": "^4.13.0",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^6.0.0",
"#react-navigation/bottom-tabs": "^5.11.2",
"#react-navigation/material-top-tabs": "^5.3.10",
"#react-navigation/native": "^5.8.10",
"#react-navigation/stack": "^5.12.8",
"#sentry/react-native": "^2.3.0",
"aws-sdk": "^2.897.0",
"babel-preset-react-app": "^7.0.0",
"base64-arraybuffer": "^0.2.0",
"jest-cli": "^26.6.3",
"json-groupby": "^1.1.0",
"moment": "^2.29.1",
"query-string": "^7.0.0",
"react": "16.13.1",
"react-dom": "^16.13.1",
"react-native": "^0.64.0",
"react-native-barcode-mask": "^1.2.4",
"react-native-base64": "^0.2.1",
"react-native-camera": "^3.43.3",
"react-native-checkbox-lite": "^1.0.2",
"react-native-countdown-component": "^2.7.1",
"react-native-datepicker": "^1.7.2",
"react-native-device-info": "^8.1.3",
"react-native-elements": "^3.3.1",
"react-native-firebase": "^5.6.0",
"react-native-flatlist-slider": "^1.0.5",
"react-native-fs": "^2.17.0",
"react-native-gesture-handler": "^1.3.0",
"react-native-material-tabs": "^4.1.2",
"react-native-mime-types": "^2.3.0",
"react-native-modal-dropdown": "^1.0.0",
"react-native-modal-overlay": "^1.3.1",
"react-native-passmeter": "0.0.5",
"react-native-phone-number-input": "^2.0.0",
"react-native-qrcode-svg": "^6.0.6",
"react-native-reanimated": "^2.1.0",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-segmented-control-tab": "^3.4.1",
"react-native-sha256": "^1.3.6",
"react-native-snap-carousel": "^3.9.1",
"react-native-sqlite-storage": "^5.0.0",
"react-native-svg": "^12.1.0",
"react-native-tab-view": "^2.16.0",
"react-native-ui-xg": "0.0.6",
"react-native-vector-icons": "^7.1.0",
"react-native-webview": "^11.4.0",
"react-navigation": "^4.4.2",
"react-navigation-drawer": "^2.5.2",
"react-navigation-stack": "^2.8.4",
"react-redux": "^7.2.3",
"react-scripts": "^4.0.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/core": "7.11.6",
"#babel/preset-env": "^7.14.1",
"#babel/runtime": "^7.14.0",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "^26.6.3",
"eslint": "6.8.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "^16.14.0"
},
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native)",
"node_modules/?!(react-navigation)"
]
}
}
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset',"#babel/react", "#babel/env"],
};
App-test.js
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import App from '../src/App';
it('renders correctly', () => {
renderer.create(<App />);
});
I had tried many accepted answers on StackOverflow and internet but no luck on solving this problem.These are some of the links I can remember of, there might be a little unrelated because I faced the same problem with other modules apart from #react-navigation:
https://stackoverflow.com/a/59802557/14792325
https://stackoverflow.com/a/54463740/14792325
https://stackoverflow.com/a/55803188/14792325
https://stackoverflow.com/a/43197503/14792325
https://lifesaver.codes/answer/react-native-syntaxerror-unexpected-token-import
Can anyone help me to identify my mistakes? Thanks a lot.
Related
I am getting the error "TypeError: (0 , _firestore.getFirestore) is not a function" When trying to run a Jest integration test with my app's Login page. It seems that Jest is unable to recognise it as a function despite the rest of my Expo app being able to recognise it just fine.
I am wondering if this is because My firebase config file uses Web Version 9 as required by Expo and if there are any solutions or alternatives to this.
Thanks
import { initializeApp } from 'firebase/app';
import { getFirestore } from "firebase/firestore";
// Firebase API
const firebaseConfig = {
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
I have tried import { firestore } from "firebase/firestore", import "firebase/firestore",
export const db+ app.firestore().
None of them works.
This is my package.json
{
"name": "test",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#emailjs/browser": "^3.10.0",
"#expo/dev-server": "0.1.120",
"#expo/webpack-config": "^0.17.0",
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "6.5.2",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-picker/picker": "2.4.8",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.3",
"#twotalltotems/react-native-otp-input": "1.3.7",
"base-64": "^1.0.0",
"expo": "^47.0.8",
"expo-checkbox": "~2.2.0",
"expo-document-picker": "~11.0.1",
"expo-image-picker": "~14.0.2",
"expo-location": "~15.0.1",
"expo-status-bar": "~1.4.0",
"expo-web-browser": "~12.0.0",
"firebase": "^9.16.0",
"jest": "^26.6.3",
"jest-expo": "^47.0.1",
"leo-profanity": "^1.7.0",
"lottie-react-native": "^5.1.4",
"moment": "^2.29.4",
"parse": "^4.0.0",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-hook-form": "^7.42.0",
"react-native": "0.70.5",
"react-native-draggable-flatlist": "^4.0.0",
"react-native-dropdown-select-list": "^2.0.4",
"react-native-gesture-handler": "~2.8.0",
"react-native-google-places-autocomplete": "^2.5.1",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keychain": "^8.1.1",
"react-native-maps": "1.3.2",
"react-native-maps-directions": "^1.9.0",
"react-native-modal-datetime-picker": "^14.0.1",
"react-native-otp-input": "^1.0.12",
"react-native-paper": "^4.12.5",
"react-native-picker-select": "^8.0.4",
"react-native-reanimated": "~2.12.0",
"react-native-reanimated-carousel": "^3.1.5",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-uuid": "^2.0.1",
"react-native-web": "~0.18.7",
"react-native-webview": "11.23.1",
"rn-credit-card": "^1.0.4",
"uniqid": "^5.4.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#testing-library/react-native": "^11.5.1"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|#react-native(-community)?)|expo(nent)?|#expo(nent)?/.*|#expo-google-fonts/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
]
},
"private": true
}
I am trying to upgrade react-router-dom v5 to v6.
I removed , change to .
Now when I create simple functional component, pass to my , it works.
<BrowserRouter>
<Routes>
<Route
path="/"
key="homepage"
component={<MyComponent />}
/>
</Routes>
</BrowserRouter>
but when I try my real routes I get a lot of errors similar this:
index.tsx:66 Uncaught TypeError: Object(...) is not a function
at Module.<anonymous> (index.tsx:66:1)
at ./src/app/profile/component/profile-gallery-filter-form/index.tsx (index.tsx:94:1)
at __webpack_require__ (bootstrap:856:1)
at fn (bootstrap:150:1)
This is my package.json
{
"name": "frontend",
"version": "0.6.57",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#js-joda/core": "^5.2.0",
"#js-joda/timezone": "^2.12.0",
"#mui/material": "^5.2.1",
"#repugraf/tinymce-react": "^3.8.1",
"#sentry/react": "^6.19.2",
"#sentry/tracing": "^6.19.2",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"#tinymce/tinymce-react": "^3.13.1",
"#types/autobahn": "^18.10.0",
"#types/axios": "^0.14.0",
"#types/classnames": "^2.3.1",
"#types/emoji-mart": "^3.0.9",
"#types/google-map-react": "^2.1.1",
"#types/jest": "^26.0.23",
"#types/node": "^12.20.12",
"#types/react": "^17.0.5",
"#types/react-bootstrap-date-picker": "^4.0.9",
"#types/react-chartjs-2": "^2.5.7",
"#types/react-confirm": "^0.1.4",
"#types/react-dom": "^17.0.3",
"#types/react-filepond": "^7.1.0",
"#types/react-google-recaptcha": "^2.1.2",
"#types/react-phone-number-input": "^3.0.6",
"#types/react-router": "^5.1.14",
"#types/react-router-dom": "^5.3.3",
"#types/react-select": "^4.0.15",
"#types/react-webcam": "^3.0.0",
"#types/redux-form": "^8.3.1",
"#types/redux-saga": "^0.10.5",
"#types/socket.io-client": "^3.0.0",
"#types/styled-components": "^5.1.9",
"#use-it/event-listener": "^0.1.7",
"#wojtekmaj/react-timerange-picker": "^3.5.0",
"autobahn": "^20.9.2",
"axios": "^0.21.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bic-validator": "^1.27.0",
"bootstrap": "^5.1.3",
"classnames": "^2.3.1",
"connected-react-router": "^6.9.1",
"emoji-js": "^3.6.0",
"emoji-mart": "^3.0.1",
"eslint-plugin-deprecation": "^1.2.1",
"eslint-plugin-unicorn": "^35.0.0",
"filepond": "^4.30.3",
"filepond-plugin-file-validate-size": "^2.2.4",
"filepond-plugin-file-validate-type": "^1.2.8",
"filepond-plugin-image-preview": "^4.6.6",
"font-awesome": "^4.7.0",
"fp-ts": "^2.10.5",
"google-map-react": "^2.1.9",
"gos-socket-client": "^0.0.4",
"http-status-codes": "^2.1.4",
"io-ts": "^2.2.16",
"is-online": "^9.0.1",
"js-file-download": "^0.4.12",
"lodash": "^4.17.21",
"material-ui-dropzone": "^3.5.0",
"parcel-bundler": "^1.12.5",
"query-string": "^7.0.0",
"rc-slider": "^10.0.0-alpha.5",
"react": "^17.0.2",
"react-bootstrap": "^2.3.1",
"react-chartjs-2": "^4.0.1",
"react-chat-widget": "git+https://github.com/krajcikondra/react-chat-widget.git#v3.1.27",
"react-confirm": "^0.1.24",
"react-contenteditable": "^3.3.6",
"react-date-picker": "^8.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.2",
"react-dropzone-uploader": "^2.11.0",
"react-filepond": "^7.1.1",
"react-flags-select": "^2.1.2",
"react-google-recaptcha-v3": "^1.9.7",
"react-hover-video-player": "^9.3.1",
"react-html-parser": "^2.0.2",
"react-i18next": "^11.8.15",
"react-image-gallery": "^1.0.9",
"react-image-lightbox": "^5.1.4",
"react-images-uploading": "^3.1.2",
"react-phone-number-input": "^3.1.21",
"react-player": "^2.9.0",
"react-pro-sidebar": "^0.6.0",
"react-redux": "^7.2.4",
"react-redux-i18n": "^1.9.3",
"react-redux-toastr": "^7.6.5",
"react-router": "^5.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"react-select": "^5.2.2",
"react-sortable-hoc": "^2.0.0",
"react-string-replace": "^1.1.0",
"react-use-localstorage": "^3.5.3",
"react-webcam": "^6.0.1",
"reactjs-autobahn": "^1.8.19",
"redux-form": "^8.3.7",
"redux-form-dropzone": "0.0.1",
"redux-saga": "^1.1.3",
"sass": "^1.32.12",
"simple-peer": "^9.11.0",
"socket.io-client": "2.2.0",
"styled-components": "^5.3.0",
"ts-opt": "^2.3.0",
"typescript": "^4.2.4",
"universal-cookie": "^4.0.4",
"use-query-params": "^1.2.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start-dev": "react-scripts --openssl-legacy-provider start",
"start": "react-scripts start",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
"build-dev": "react-scripts build",
"test": "react-scripts test --watchAll=false",
"eject": "react-scripts eject",
"lint": "eslint --ext .ts,.tsx src --report-unused-disable-directives",
"lint-fix": "eslint --ext .ts,.tsx src --report-unused-disable-directives --fix",
"release": "bash .docker/release.sh"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/chart.js": "^2.9.35",
"#types/lodash": "^4.14.168",
"#types/react-image-gallery": "^1.0.2",
"#types/react-redux-i18n": "0.0.11",
"#types/react-redux-toastr": "^7.6.0",
"#typescript-eslint/eslint-plugin": "^4.29.3",
"#typescript-eslint/parser": "^4.29.3",
"chart.js": "^3.7.1",
"filepond-plugin-image-exif-orientation": "^1.0.11"
}
}
Somebody know what is wrong? I can't figure it out. Maybe react-router-dom need other version of some other package?
Thanks in advance
react-router-dom#6 is completely written in typescript, so you can remove "#types/react-router": "^5.1.14" and "#types/react-router-dom": "^5.3.3" from the project's dependencies as they are no longer necessary and may possibly mess with any linters and transpilers your project uses.
npm uninstall -S #types/react-router #types/react-router-dom
You've also a conflicting version of react-router installed and it should be removed. react-router-dom re-exports all of react-router for convenience.
npm uninstall -S react-router
The only other issue I see is in the code. The react-router-dom#6 Route component API changed significantly from v5; there is no longer any component, and render and children function props, all replaced by a single element prop taking a ReactNode value, a.k.a. JSX.
Example:
<BrowserRouter>
<Routes>
<Route
path="/"
key="homepage"
element={<MyComponent />}
/>
</Routes>
</BrowserRouter>
Unfortunately same problem after update my code and uninstall react-router library.
After 4 hours of debugging I find out problem is in import of files.
When I import file by this way:
index.tsx
import {profileAction} from './model';
// import {profileAction} from './model/action'; // when I change import to this it works
and model/index.tsx looks
export * from './action';
export * from './action-type';
export * from './api';
export * from './state';
export * from './sagas';
and model/action.ts looks:
export const profileAction = {...}
then I ever get error like this:
index.tsx:66 Uncaught TypeError: Object(...) is not a function
at Module.<anonymous> (index.tsx:66:1)
at ./src/app/profile/component/profile-gallery-filter-form/index.tsx (index.tsx:94:1)
at __webpack_require__ (bootstrap:856:1)
at fn (bootstrap:150:1)
i haven't a clue why my imports are broken. Since update react-router-dom all imports works fine.
I have strange error, i don’t know what causing this but last time i develop my project was fine. After no reason my chrome browser lost its cache data (next day). when i run my vue3 project the error appears. What console logs said
App.vue?3dfd:11 Uncaught TypeError: Object(...) is not a function
at eval (App.vue?3dfd:11)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/#vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/#vue/cli-service/node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90
img1
And that pointing to something right before
img2
This is my main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Notifications from 'vue3-vt-notifications'
import { store } from './stores'
import Particles from 'particles.vue3'
// import tailwind css
import '../src/styles.css'
// firebase auth service
import { projectAuth } from './firebase/config'
let app
projectAuth.onAuthStateChanged(() => {
if(!app){
app = createApp(App)
.use(router)
.use(store)
.use(Particles)
.use(VueAxios, axios)
.use(Notifications)
.mount('#app')
}
})
and this is my package.json
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-css": "tailwindcss build src/styles.css -o public/styles.css"
},
"dependencies": {
"#dafcoe/vue-collapsible-panel": "^0.2.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#tinymce/tinymce-vue": "^4.0.0",
"algoliasearch": "^4.10.5",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.6.5",
"d3": "^7.0.0",
"d3-svg-legend": "^2.25.6",
"d3-v6-tip": "^1.0.9",
"date-fns": "^2.16.1",
"es6-promise": "^4.2.8",
"firebase": "^8.2.1",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"firebaseui": "^4.7.1",
"js-md5": "^0.7.3",
"jspdf": "^2.3.1",
"node-sass": "^5.0.0",
"particles.vue3": "^1.12.2",
"postcss": "^7.0.35",
"sass-loader": "^11.0.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"vue": "^3.0.0",
"vue-axios": "^3.2.4",
"vue-clipboard3": "^1.0.0",
"vue-disqus": "^5.1.0",
"vue-dropdowns": "^1.1.2",
"vue-google-signin-button": "^1.0.4",
"vue-instantsearch": "^4.0.0",
"vue-load-image": "^1.1.0",
"vue-loader": "^15.9.7",
"vue-meta": "^3.0.0-alpha.2",
"vue-nav-tabs": "^0.5.7",
"vue-rate": "^2.4.0",
"vue-router": "^4.0.0-0",
"vue-typewriter": "^2.2.1",
"vue3-carousel": "^0.1.13",
"vue3-datepicker": "^0.2.4",
"vue3-vt-notifications": "^1.0.0",
"vuex": "^4.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0"
}
}
In Addition, I don’t know if this related or not every time in run serve. it finish at 98% with this warning:
img3
Somebody please help me
I also encountered the same problem, and finally found that when I imported nanoid, deconstruction was not used. After adding {}, the error was resolved. You can see if it is the problem of importing third-party libraries.
Jest fail to run:
Cannot find module 'react-dom' from 'node_modules/mobx-react-lite/dist/mobxreactlite.cjs.development.js'
Why Jest need react-dom in React Native environment? Can't seems to fix it..
my dev dependencies:
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#types/jest": "^27.0.1",
"#types/react-native": "^0.64.5",
"#types/react-test-renderer": "^17.0.1",
"babel-jest": "^27.0.6",
"chalk": "^4.1.2",
"eslint": "^7.14.0",
"jest": "^27.0.6",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "^17.0.2",
"typescript": "^3.8.3"
},
also in package.json:
"jest": {
"preset": "react-native"
}
Any idea?
I am trying to run a simple jest and enzyme test against a react component and test throws: ReferenceError: React is not defined. I followed all simple tutorials on jest and react testing but all of them resulted in the same exception. I used npm test and result was the same as yarn test, React not defined. I am confused. Any help would be appreciated.
Checkbox.test.jsx: simple test
import { shallow } from 'enzyme';
import sinon from 'sinon';
import Checkbox from './Checkbox';
describe('<Checkbox />', () => {
it('should render three <Checkbox /> components', () => {
const wrapper = shallow(<Checkbox />);
expect(wrapper.prop('title')).toEqual('Events — Event Radar');
});
});
Console log
$ yarn test
FAIL src\components\ReusableComponents\Checkbox.test.jsx (5.248s)
<Checkbox />
× should render three <Checkbox /> components (4ms)
● <Checkbox /> › should render three <Checkbox /> components
ReferenceError: React is not defined
at Object.<anonymous> (src/components/ReusableComponents/Checkbox.test.jsx:8:40)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 10.517s
Ran all test suites.
error Command failed with exit code 1.
package.json
{
"name": "mi-benchmarking-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.0",
"classnames": "^2.2.5",
"history": "^4.7.2",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-bootstrap": "^0.31.5",
"react-bootstrap-table": "^4.1.1",
"react-dom": "^16.0.0",
"react-logger": "^1.1.0",
"react-pagination-table": "^1.1.0",
"react-redux": "^5.0.6",
"react-router": "^3.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "1.0.14",
"react-simple-paginate": "^1.1.0",
"react-table": "^6.6.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.26.0",
"babel-eslint": "^6.0.4",
"babel-jest": "^21.2.0",
"babel-loader": "^6.2.4",
"babel-plugin-react-require": "^3.0.0",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-spread-inline": "0.0.2",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"clean-webpack-plugin": "^0.1.13",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.23.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.2",
"eslint": "^3.19.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-react": "^7.1.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.16.1",
"jest": "^21.2.1",
"jest-enzyme": "^4.0.1",
"json-loader": "^0.5.4",
"postcss-loader": "^0.9.1",
"redux-devtools": "^3.4.0",
"sinon": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "2.6.1",
"webpack-dev-server": "2.5.0",
"webpack-manifest-plugin": "1.1.0"
},
"scripts": {
"start": "npm run build:dev",
"build:dev": "webpack-dev-server --inline --history-api-fallback",
"build:test": "webpack --define process.env.NODE_ENV='test'",
"build:stage": "webpack --define process.env.NODE_ENV='stage'",
"build:prod": "webpack --define process.env.NODE_ENV='production'",
"eject": "react-scripts eject",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
},
"jest": {
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
}
}
Import React in your test and the error should disappear:
import React from 'react';
I tried removing this import in one of my tests and I got the same error you mentioned.
I hope this helps.