Тестирование модуля с использованием Jest для компонента React/Redux

Question

Я тестирую подключенный компонент с помощью Jest. Это как компонент выглядит:

import React, {Component, PropTypes} from 'react'; 
import { connect } from 'react-redux'; 

class MyComponent extends Component { 
    constructor(){ 
    super(); 
    this.onButtonClick = this.onButtonClick.bind(this); 
    } 

    onButtonClick(id) { 
    dispatch(actions.onButtonClick(id)); 
    } 

    render() { 
    return (
     <div onClick={this.onButtonClick} /> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    something: state.something 
} 

MyComponent.propTypes = { 
    dispatch: PropTypes.func.isRequired 
} 

export default connect(mapStateToProps)(MyComponent) 

Я не уверен, как проверить «onButtonClick», поскольку оно посылает действие. Как я ожидаю, что отправка будет вызвана с правильными параметрами с помощью шутки.

Answer 1

Что вы можете сделать, это экспортировать свой компонент в дополнение к экспорту по умолчанию. Поэтому измените его на:

export class MyComponent extends Component 

В своем тесте теперь вы можете импортировать свой фактический компонент вместо подключенного компонента. Поскольку у вас есть dispatch в качестве опоры вашего компонента, вы можете предоставить функцию макета или шпиона (используя что-то вроде жасмина или синона) для dispatch в вашем тесте, и вы можете проверить, вызвано ли это правильными параметрами.

Проверьте больше на Redux тестирования здесь: http://redux.js.org/docs/recipes/WritingTests.html