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

Question

我正在使用 enzyme 来测试我的 react 成分。我有一个具有内部功能的无状态组件。我如何调用和测试该内部函数？

这是我的组件:

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 is not a constructor

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

Answer 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 事件，这是其工作中最重要的部分。