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

Question

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

这是我的组件:

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

Answer 1

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

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

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

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

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