酶Shallow()和AddEventListener

我有这个组件,它在应用程序中工作正常:

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')