Блог

Я пытаюсь использовать мелкую оболочку Enzyme, чтобы получить экземпляр моего компонента и вызвать над ним функцию моего класса. Он показывает мне эту ошибку: Ошибка типа: tree.instance(…).onCampaignSelected не является функцией

 class ToolbarPage extends Component {
  constructor(){
    super();
    this.onCampaignSelected = this.onCampaignSelected.bind(this);
    this.state = {
      item: null
    }
  }

  onCampaignSelected (item) {
     this.setState({item})
  }

  render () {
    return (
      <MyComponent onItemSelected={this.onCampaignSelected} />
    )
  }
}
function mapStateToProps(state){
  buttons: state.toolbar.buttons
}
export default connect(mapStateToProps)(ToolbarPage);
  

Мой тестовый пример выглядит так

 import { shallow, mount } from 'enzyme';
import ToolbarPage from './ToolbarPage';
import configureStore from 'configureStore';

const store = configureStore();

const props = {
 store,
 isLoggedIn: false,
 messageCounter: 0
}

describe('<ToolbarPage />', () => {
  it('allows to select campaign', () => {
    const tree = shallow(<ToolbarPage {...props}/>);
    tree.instance().onCampaignSelected();
  })
})
  

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

shallow не отображает полный набор компонентов со всеми их свойствами и методами. Он предназначен для простого «эта вещь отображала то, что я ожидал?» тестирование.

mount предоставит вам все и позволит вам протестировать все, что вам нужно. Это очень полезно для тестирования обработки событий и управления состоянием компонентов для проверки взаимодействия между компонентами.