React, Enzyme, Redux модульный тест подключенного компонента в React 16+

Question

Я пытался обновиться до 16+, и мои существующие модульные тесты не пройдены. Приложение работает нормально, только модульные тесты не пройдены.

подключенный компонент:

const componentsWrapper = (Components, selectData) => {

    class BaseComponent extends Component {

        constructor(props) {
            super(props);
            this.state = {
                saveMode: false,
                updateMode: false
            };
            this.foo = () => { };
        }

        render() {
          return (
              <Components
                  {...this.props}
              />
          );
        }

    }
  }

    const mapDispatchToProps = dispatch => {
        return selectData.getDispatch(dispatch);
    };
    const mapStateToProps = state => {
        return selectData.getStore(state);
    };

    return connect(mapStateToProps, mapDispatchToProps)(BaseComponent);
};

export default componentsWrapper;

модульный тест:

class MockListComponent extends Component {
  render() {
      return (<div>Fake List</div>);
  }
}
Components = componentsWrapper(MockListComponent, selectComponents);
wrapper = shallow(<Components store={store} />).dive();
instance = wrapper.instance()
// Here instance is null hence the rest will fail.
instance.foo = jest.fn();

instance пусто, потому что "Connect" компонент функционирует или не имеет состояния. Источник

ПРИМЕЧАНИЕ: С React 16 и выше, instance () возвращает ноль для функциональных компонентов без состояния.

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

Вот версии библиотеки, которые я пытаюсь использовать: react@16.2.9 enzyme@3.3.0 redux@4.0.5

Answer 1

Я не уверен, какое именно поведение вы пытаетесь протестировать, но во многих случаях нет необходимости явно «тестировать» весь подключенный компонент, если вы не планируете проводить интегрированное тестирование или функциональное тестирование.

Чтобы устранить проблему, с которой вы столкнулись, я бы порекомендовал вам экспортировать дочерний компонент (обратите внимание на export на BaseComponent):

const componentsWrapper = (Components, selectData) => {

  export class BaseComponent extends Component {

   // ... rest of the logic

  }

}

Затем в вашем тесте файл, мы используем энзим .find() до найти узел, который соответствует селектору. В этом случае наш селектор BaseComponent.

const wrapper = shallow(<Components store={store} />)
const wrapperInstance = wrapper.dive().find(BaseComponent).instance();

Оттуда у вас будет доступ к экземпляру класса BaseComponent, и вы можете использовать его для вызова его методов или шпионажа за его методами.

---

Причина, по которой вы сталкиваетесь с ошибкой, указанной в вопросе, объясняется в документации по ферментам :

При использовании React 16 и выше, instance () возвращает ноль для функциональных компонентов без сохранения состояния.

Следовательно, .instance() можно вызывать только для самого компонента, а не для всего подключенного компонента.