Jest - предупреждение о тестировании фермента - PullRequest
Новая
       39

Jest - предупреждение о тестировании фермента

0 голосов
/ 29 января 2020

Выполняю тестирование с jest и enzyme, и я думаю, что все делаю правильно, но каким-то образом получаю предупреждение:

Предупреждение: сбойный тип проп: проп project помечен как требуется в ProjectPageUI, но его значение undefined. в ProjectPageUI

Вот как выглядит тест: 

test('shallow-render without crashing', () => {
  /*  
    project: PropTypes.object.isRequired,
   */

  const props = { 
    match: { params: {} },
  }
  const store = configureStore()(STATE_WITH_2_FAMILIES)
  shallow(<ProjectPageUIComponent store={store} {...props} />)
})

Внутри ProjectPageUI.jsx Я получаю project свойство с помощью селектора: 

const mapStateToProps = (state, ownProps) => ({
  project: getCurrentProject(state),
})

Где getCurrentProject является следующим: 

export const getProjectsByGuid = state => state.projectsByGuid
export const getProjectGuid = state => state.currentProjectGuid

export const getCurrentProject = createSelector(
  getProjectsByGuid, getProjectGuid, (projectsByGuid, currentProjectGuid) => projectsByGuid[currentProjectGuid],
)

В STATE_WITH_2_FAMILIES у меня определены и projectsByGuid, и currentProjectGuid, а projectsByGuid имеет соответствующий ключ для currentProjectGuid и определенный объект , Итак, теперь я задаюсь вопросом, почему происходит это предупреждение и как я должен изменить свой тест, так как я ожидаю, что у него вообще не будет проблем: селектор получает project от state, и это должно быть defined.

Уточнение

Вот как выглядит ProjectPageUI: 

const ProjectPageUI = (props) => {
    ...
    ...
    return ( ... )
}

ProjectPageUI.propTypes = { 
  project: PropTypes.object.isRequired,
  ...
  ...
}

const mapStateToProps = (state, ownProps) => ({
  project: getCurrentProject(state),
  ...
  ...
})

export { ProjectPageUI as ProjectPageUIComponent }

export default connect(mapStateToProps)(ProjectPageUI)

Ответы [ 3 ]

1 голос
/ 29 января 2020

Довольно глупо, но это была проблема неправильного импорта ProjectPageUI. Я импортировал его как: 

import { ProjectPageUIComponent } from './ProjectPageUI'

, который импортирует неподключенный компонент, но должен был импортировать путь по умолчанию: 

import ProjectPageUI from './ProjectPageUI'

Что сработало

1 голос
/ 29 января 2020

Поскольку вы экспортируете свой необработанный компонент 

export { ProjectPageUI as ProjectPageUIComponent }

Вы можете протестировать его напрямую, без необходимости макетировать провайдера и хранить 

import { ProjectPageUIComponent } from '.'; // import raw component

...

test('shallow-render without crashing', () => {

  const props = { 
    match: { params: {} },
    project: { /* now mock up a project object for testing */ }
    // mock/supply any other required props
  }

  shallow(<ProjectPageUIComponent {...props} />)
});

Рассматривали ли вы react-testing-library? IMO, это гораздо более чистый способ тестирования компонентов пользовательского интерфейса. Для простого теста «рендеринг без сбоев» он очень похож на описанный выше.

1 голос
/ 29 января 2020

Попытайтесь обернуть свой компонент компонентом провайдера редукса. Это делает хранилище Redux доступным для любых вложенных компонентов, которые были упакованы в функцию connect (). 

shallow(
  <Provider store={store}>
    <ProjectPageUIComponent {...props} />
  </Provider>)
...