使用Jest/Enzyme测试React组件

Question

使用Jest/Enzyme测试React组件

3

我正在尝试使用Enzyme的浅包装器(shallow wrapper)获取我的组件实例并调用其中的类函数。但是它显示了以下错误: 类型错误: 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();
  })
})

我发现它是一个包装组件，因此我无法在包装组件上获取此功能。我该如何访问此函数？

- Varsha

代码似乎没问题。tree.debug()返回什么？另外，你没有遇到props未定义的错误吗？你在提供的代码示例中漏掉了什么吗？ - Alexandr Lazarev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kryten · Answer 1

shallow 不会渲染所有组件及其属性和方法。它仅用于基本的“这个东西是否按照我预期的那样呈现？”测试。

mount 将提供所有内容，并应允许您测试所需的任何内容。它非常有用，可用于测试事件处理和操作组件状态以测试组件之间的交互。