Как проверить компонент, который содержит компонент, подключенный к Redux в Enzyme / React?

Question

При тестировании React компонентов , которые подключены к Redux в Enzyme , есть знакомый признак.Возможно, вы столкнулись с этой ошибкой:

Invariant Violation: Could not find "store" in either the context or props of "Connect(YourComponent)

Это разрешено путем двойного экспорта тестируемого компонента:

export class YourComponent extends Component {}
export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

И в вашем тесте импортировать YourComponent как объект :

import { YourComponent } from '../pathToYourComponent'

Я столкнулся с новым сценарием, касающимся этой проблемы.Я тестирую подключенный компонент и использую приведенное выше решение для решения этой проблемы, однако внутри этого компонента есть другой подключенный компонент, который отображается при наличии определенных реквизитов.

import React, { Component } from 'react';
export class YourComponent extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    const { arrayOfObjects } = this.props;

    let nestedConnectedComponent; 
    if (arrayOfObjects.length) {
      nestedConnectedComponent = arrayOfObjects.map((ele, idx) => (
        <NestedConnectedComponent
          key={idx}
        />
      ))
    }
    return (
      <div> {arrayOfObjects} </div>
    )
  }
}

function mapStateToProps(){}
function mapDispatchToProps(){}

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

Как сделатьвы избегаете ошибки «не удалось найти хранилище» при тестировании компонента, содержащего компонент, подключенный к redux?

Компонент мелкий отображается в последней версии Enzyme,

Answer 1

Вы не получите эту ошибку, если будете использовать неглубокий рендеринг из документов

'Глубокий рендеринг полезен для того, чтобы ограничиться тестированием компонента как модуля и убедиться, что ваши тесты не являются косвеннымиутверждение о поведении дочерних компонентов. '