victorzadorozhnyy
@victorzadorozhnyy

Как протестировать с Jest такой компонент со store?

Есть компонент, который вроде бы должен импортироваться без redux как dummy, но так не получается.
Есть два решения проблемы - разобраться как импортировать простой компонент или как правильно завернуть в Provider. Любому решению рад.
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 компонент
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

Ошибка
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.


Как это протестировать?
  • Вопрос задан
  • 389 просмотров
Пригласить эксперта
Ответы на вопрос 1
Negwereth
@Negwereth
lvivcss.com.ua
Слушай, ну начни уже ошибки читать.

Тут к тестам вообще ничего не относится, уже вторая ошибка из-за проблемного кода, а не логики.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы