2016-10-04 5 views
3

Я пытаюсь использовать мелкую оболочку Фермента, чтобы получить экземпляр моего компонента и вызвать функцию класса над ним. Он показывает мне эту ошибку: TypeError:. Tree.instance (...) onCampaignSelected не является функциейТестирование React Component with Jest/Enzyme

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(); 
    }) 
}) 

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

+0

Код, кажется, в порядке. Что возвращает 'tree.debug()' ?. Кроме того, вы не ошибаетесь, что 'реквизит'' undefined'? Разве вы не пропустили что-то в приведенном примере кода? –

ответ

0

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

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

+1

Он должен позволить вам вызвать методы экземпляра. –