Как протестировать компонент с вложенным контейнером с помощью React и Redux?

Из-за сложности приложения, над которым я работаю, я решил использовать вложенный контейнер redux вместо того, чтобы передавать действие в качестве поддержки до дочерних компонентов. Однако это оказалось проблематичным для модульного тестирования при рендеринге OuterContainer с jsdom в сочетании с mocha, chai и sinon.

Вот надуманный пример структуры представления:

<OuterContainer>
  <div>
    <InnerContainer />
  </div>
</OuterContainer>

где OuterContainer и InnerContainer завернуты соединением. например:.

export connect(<mapStateToProps>)(<Component>)

При выполнении тестов возникает ошибка: Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a `<Provider>`, or explicitly pass "store" as a prop to "Connect(Component)".

Есть ли способ развернуть или заглушить InnerContainer для модульного тестирования без использования мелкого рендеринга?

Ответ 1

При тестировании оберните свой компонент в <Provider>. Это зависит от вас, нужно ли поставлять настоящий магазин или макет с { dispatch, getState, subscribe }. Обертка внешнего компонента в <Provider store={store}> также сделает доступным для дочерних компонентов доступ к дочерним компонентам на любом уровне вложенности - как и в самом приложении.

const store = createStore(reducer) // can also be a mock
ReactTestUtils.renderIntoDocument(
  <Provider store={store}>
    <OuterContainer />
  </Provider>
)

Ответ 2

Другой подход заключается в экспорте как компонента, подлежащего подключению, так и контейнера. Конечно, контейнер по умолчанию.

export const Comp = (props) => (<p>Whatever</p>)
export default connect(...)(Comp)

Следовательно, вы можете unit test Comp.