如何测试React with Enzyme中无状态组件上定义的内部函数

时间:2017-01-05 11:46:45

标签: javascript function reactjs testing enzyme

我用酶来测试我的反应成分。我有一个具有内部函数的无状态组件。我怎样才能调用并测试内部函数?

这是我的组件:

const Btn = (props) => {
  const types = ['link', 'plainLink', 'primary', 'secondary', 'danger', 'info'];

  const handleClick = (event) => {
    event.preventDefault();
    props.onClick(event);
  };

  return (
    <button onClick={handleClick} className={classes}>
      <span>{props.children}</span>
    </button>
  );
};

我已尝试过以下操作,但收到错误消息:TypeError:undefined不是构造函数

const btnComp = shallow(<Btn />);
btnComp.instance().handleClick();

1 个答案:

答案 0 :(得分:1)

我通常通过为事件设置sinon.spy来测试此功能:

const click = sinon.spy();
const btnComp = shallow(<Btn onClick={click} />);

btnComp.find('button').simulate('click');

expect(click.called).to.equal(true);

现在,您知道内部函数确实调用了props.onClick事件,这是其工作中最重要的一点。