用Jest/Enzyme测试React组件

我正在尝试使用Enzyme的浅包装来获取组件的实例并调用我的类功能。它显示了我这个错误： 类型错误：tree.instance（...）onCampaignSelected不是一个函数用Jest/Enzyme测试React组件

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

我也想通它是一个包装组件，所以我不会在包装组件上获得这个功能。我如何访问此功能？

来源

2016-10-04 Varsha

代码似乎没问题。什么'tree.debug（）'返回？另外，你不知道'props'是'undefined'的错误吗？你不错过提供的代码示例中的某些内容吗？ –

shallow不呈现具有其所有属性&方法的全套组件。它旨在用于基本的“这个东西是否能呈现我所期望的？”测试。

mount会给你一切并且应该允许你测试你需要的任何东西。它对测试事件处理非常有用，它可以操纵组件的状态来测试组件之间的交互。

来源

2016-10-04 14:34:47 Kryten

它应该让你调用实例方法。 –

用Jest/Enzyme测试React组件

回答

相关问题