Develop Reference

React-router-dom update 5 to 6 Object(...) is not a function

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.

Uncaught TypeError: Object(…) is not a function in internal Vue3

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.

SyntaxError: Unexpected token 'export' on '#react-navigation'

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.

Vue router programmatic navigation not works

My programmatic navigation in the component using the vue-router is not working. After the successfull login I want redirect it to the dashboard page. But nothing happens...
Relevant code - the router:
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '#/components/Login'
import Dashboard from '#/components/Dashboard'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: Login,
beforeEnter: (to, from, next) => {
if (store.getters.isAuthenticated) {
// if user is already authenticated,
// redirect it to the dashboard
next('/dashboard') // it works
} else {
next()
}
}
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
beforeEnter: (to, from, next) => {
if (store.getters.isAuthenticated) {
next()
} else {
// if user is not authenticated,
// redirect it to the login
next('/login') // it works
}
}
}
]
})
Method in component:
userLogin () {
this.authorizeUser({
name: this.user.name,
pass: this.user.pass
}).then(result => {
console.log('redirected to dashboard')
this.$router.push('dashboard') // this doesn't work
})
}
Package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "xxx",
"author": "xxx",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"amazon-cognito-identity-js": "^1.31.0",
"axios": "^0.17.1",
"numeral": "^2.0.6",
"sweetalert2": "^7.4.0",
"vee-validate": "^2.0.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.4.9",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
No errors there, but no action is taken also - I'm still staying on the login page. What am I missing?
EDIT:
This works: this.$router.go('dashboard') Does it mean I'm using the old version?

Your approach to redirecting is correct and this.$router.push('dashboard') is the correct approach. With that in mind and based on our other tests, remove your beforeEnter from the route as this is the last point in the chain that could cause a problem and stop the redirect.
You'll have to isolate the issue as to why that's not working separately.

Try this:
this.$router.push({ path: '/dashboard' })
At least this works for me.

What's happening is that you are calling this.$router inside of a result => { } context so this is relative to that function. You have to save this from the outside context for it to work.
Put this const router = this.$router; before this.authorizeUser({ and then router.push('dashboard'); and then it will work.

Trying to unit test a React component using Jest and Enzyme

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.