How to test such a component with store with Jest?

Question

Software testing

There is a component that seems to be imported without redux as dummy, but it doesn't work that way.
There are two solutions to the problem - figure out how to import a simple component or how to properly wrap it in a Provider. Any decision is welcome.
test

import React from 'react'
import {createStore} from 'redux'
import Provider from 'react-redux'
import reducers from '../src/store/createStore'

import renderer from 'react-test-renderer'

import {Station} from './../src/routes/Station/components/Station/Station'
cont store = createStore(reducers)
describe('Test Station Router', () => {
it('+++ renders correctly Station', () => {
    const tree = renderer.create(
      <Provider store={store}>
        <Station list={menuItems} current='current' zip='ZIP'
          onPlay={() => {}}
          changeFocus={() => {}}
          isFocused={() => {}}
          downHandler={() => {}} />
      </Provider>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
})

Station component

import React from 'react'
import '../../../../styles/core.scss'
import StationListMenu from '../../../../components/StationList'
import TopNavigation from '../TopNavigation'
import NamedMenuComposer from '../../../../lib/reactv-navigation/components/NamedMenu'
import PropTypes from 'prop-types'

export const Station = ({list, changeFocus, isFocused, current, focusChange, downHandler, onPlay, zip}) => (
  <div className='MainMenu innerContent'>
    <TopNavigation defaultFocus={`station:navigation:${current}`}
      mid='station:navigation'
      onDown={changeFocus('station:list')}
      focused={isFocused('station:navigation')}
      newFocus={focusChange} />
    <div className='ContentNav'>
      <StationListMenu menuItems={list}
        mid={`station:list:${current}`}
        focused={isFocused('station:list')}
        onUp={changeFocus('station:navigation')}
        onDown={downHandler}
        onEnter={onPlay}
        zip={zip}
      />
    </div>
  </div>
)

Station.propTypes = {
  downHandler: PropTypes.func.isRequired,
  list: PropTypes.array
}

// export default NamedMenuComposer 
// return menuComposer(connect(mapStateToProps, mapDispatchToProps)(NamedMenu))
export default NamedMenuComposer(Station)

createStore

import { applyMiddleware, compose, createStore as createReduxStore } from 'redux'
import thunk from 'redux-thunk'
import { browserHistory } from 'react-router'
import makeRootReducer from './reducers'
import { updateLocation } from './location'
import attachWatchers from './watchers'
import {routerMiddleware} from 'react-router-redux'

const createStore = (initialState = {}) => {
  // ======================================================
  // Middleware Configuration
  // ======================================================
  const middleware = [thunk, routerMiddleware(browserHistory)]

  // ======================================================
  // Store Enhancers
  // ======================================================
  const enhancers = []
  let composeEnhancers = compose

  if (__DEV__) {
    if (typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === 'function') {
      composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    }
  }

  // ======================================================
  // Store Instantiation and HMR Setup
  // ======================================================
  console.info('creating redux store...')
  const store = createReduxStore(
    makeRootReducer(),
    initialState,
    composeEnhancers(
      applyMiddleware(...middleware),
      ...enhancers
    )
  )
  attachWatchers(store)

  store.asyncReducers = {}

  // To unsubscribe, invoke `store.unsubscribeHistory()` anytime
  store.unsubscribeHistory = browserHistory.listen(updateLocation(store))

  if (module.hot) {
    module.hot.accept('./reducers', () => {
      const reducers = require('./reducers').default
      store.replaceReducer(reducers(store.asyncReducers))
    })
  }

  return store
}

export default createStore

Mistake

console.error node_modules/fbjs/lib/warning.js:35
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.

How to test it?

Answer 1

Listen, well, start reading the mistakes already.
Here, nothing applies to tests at all, the second error is due to problematic code, not logic.