Как вы тестируете реактивный компонент с подключением к редуксу, экспортируя его как PureComponent?

Question

Я искал решение, которое, как я знаю, работает, но синтаксис меня сбивает с толку Вот сценарий:

У вас есть подключенный компонент с резервированием, который экспортируется следующим образом:

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

Вам необходимо протестировать этот компонент и не увидеть эту ошибку в Enzyme:

Could not find "store" in either the context or props of "Connect(componentToExport)"

Решение выглядит примерно так:

В нижней части тестируемого компонента у вас есть:

export default connect(mapStateToProps, mapDispatchToProps)(componentToExport);
export default componentToExport as PureComponentToExport

Я пытался использовать:

import from React, { PureComponent } 

и затем создание компонента с

extends PureComponent 

но это не работает, как ожидалось. Фермент должен иметь это в документации: /

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

спасибо:)

Answer 1

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import ChildComponent from './ChildComponent';


export class YourComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ChildComponent/>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    state,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
    yourActionsGoHere,
    },
    dispatch
  );
}

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

В своем тесте на фермент вы захотите:

import { YourComponent } from '../YourComponent';

Answer 2

Способ сделать это - также экспортировать неподключенный компонент, например, добавив export к его определению или используя явный экспорт:

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

И затем импортируйте его в свой тест с именованным импортом, например

import { YourComponent } from '../YourComponent';

Более подробная информация о тестировании подключенных компонентов содержится в redux docs .