酶 shallow() 和 addEventListener答案

【问题标题】：Enzyme shallow() and addEventListener酶 shallow() 和 addEventListener
【发布时间】：2018-11-30 21:53:03
【问题描述】：

我有这个组件，它在应用程序中运行良好：

class TheComponent extends Component {

  componentDidMount() {
    this.watchForClicks();
  }

  watchForClicks() {
    this.elementRef.addEventListener('click', () => {
      console.log('there went one!');
    });
  }

  render() {
    return (
      <div
        ref={theElement => {
          this.elementRef = theElement;
        }}
      >
        ...
      </div>
    );
  }
}

export default TheComponent;

还有这个测试：

describe('<TheComponent />', () => {
  context('do a test:', function() {
    it.only('fails!', () => {
      wrapper = shallow(<TheElement />)
    })
  });
});

为什么会出现此错误？

undefined is not an object (evaluating 'this.elementRef.addEventListener')

【问题讨论】：

你为什么使用 ref 并添加 eventlistener 来点击反应？为什么不直接做<div onClick={() => console.log('there went one!')}>？然后在酶上你可以做wrapper.prop('onClick')()
以上是实际组件的简化版。我需要它的原因超出了问题的范围。

标签： javascript reactjs enzyme

【解决方案1】：

如您所见in the docs，ShallowWrapper API 没有ref() 方法，但您可以改用mount()，即does have the ref() method。

【讨论】：