0

I have index.js file in react app.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'
import * as serviceWorker from './serviceWorker';
import {combineReducers,createStore,compose,applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import { HashRouter } from 'react-router-dom';
import playerReducer from './store/Player/PlayerReducers'
import cardReducer from './store/Cards/cardsReducer'
import playersReducer from './store/Players/PlayersReducer'
import stylesReducer from './store/Styles/StylesReducer'
const rootReducer = combineReducers({
    player: playerReducer,
    cards:cardReducer,
    players:playersReducer,
    styles:stylesReducer
})
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)))

ReactDOM.render(
    <Provider store={store}>
     <HashRouter>
      <App />
     </HashRouter>
</Provider>
    , document.getElementById('root'));

serviceWorker.unregister();

export {store}

I use jest and enzyme for testing. In testSetup.js I have

import Enzyme from 'enzyme'
import EnzymeAdapter from 'enzyme-adapter-react-16'


Enzyme.configure({
    adapter: new EnzymeAdapter(),
    disableLifecycleMethods:true
})
when I write npm run test wor testing it gives me this error Target container is not a DOM element. 
  21 | const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)))
  22 |
> 23 | ReactDOM.render(
     |          ^
  24 |     <Provider store={store}>
  25 |      <HashRouter>
  26 |       <App />

  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24828:13)
  at Object.<anonymous> (src/index.js:23:10)
  at Object.<anonymous> (src/store/Styles/StylesActions.js:1:1)
  at Object.<anonymous> (src/Register/SignUp.js:5:1)
  at Object.<anonymous> (src/App.js:4:1)
  at Object.<anonymous> (src/App.test.js:3:1)

console.error node_modules/react/cjs/react.development.js:315 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at index.js:26.

Do you have any ideas?

Ek4m
  • 15
  • 7
  • Does this answer your question? [React.createElement: type is invalid -- expected a string](https://stackoverflow.com/questions/42813342/react-createelement-type-is-invalid-expected-a-string) – Kitson May 07 '20 at 13:00
  • I've had it before and the root cause was an incorrect import. Did you export `App` as a default? If not try `import { App } from './App` Looks like a duplicate of this: https://stackoverflow.com/questions/42813342/react-createelement-type-is-invalid-expected-a-string – Kitson May 07 '20 at 13:01
  • The question doesn't contain the test itself. See https://stackoverflow.com/help/mcve . But I'm sure that the problem is that index.js was imported in tests like suggested above, while it shouldn't. – Estus Flask May 08 '20 at 10:39

0 Answers0