React Testing Library TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present

Question

我有 React class 有事件的组件

constructor(props) {
    super(props);

    this.monthRef = React.createRef();
    this.yearRef = React.createRef();

    this.state = {
      moIndexActive: props.initialMonth - 1,
      yeIndexActive: years.findIndex(y => y === `${props.initialYear}`),
    };
  }
//some code blablabla
// this error occur in this line bellow
  componentWillUnmount() {
    this.monthRef.current.removeEventListener('scroll');
    this.yearRef.current.removeEventListener('scroll');
  }

该组件用于功能组件，当我测试功能组件时出现错误消息

我正在使用 React 测试库对此进行测试，我已经在 google 上进行了搜索，但尚未找到解决方案，请帮助我。如果有任何方法可以在 React 测试库或 Jest 上模拟 removeEventListener。提前致谢。

Answer 1

alfan-juniyanto,

错误消息准确地告诉您出了什么问题 -- 您在 componentWillUnmount() 函数中对方法 removeEventListener('scroll') 的调用需要两个参数：

停止收听的事件，
您之前在调用 addEventListener 时注册的当前事件处理程序（它似乎不在您提供的代码片段中）。

更多信息，您可以阅读这里：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

但是，为了明确回答您的问题，您应该传递一个指向您在 addEventListener 周期中使用的事件处理程序的指针。

如果您只是为了测试目的而停止此错误消息，您可以这样做：

componentWillUnmount() {
    const _fnEmptyFunctionPointer = ()=>{};
    this.monthRef.current.removeEventListener('scroll', _fnEmptyFunctionPointer);
    this.yearRef.current.removeEventListener('scroll', _fnEmptyFunctionPointer);
  }

我上面提供的代码片段只是传递一个空函数作为 removeEventListener 方法的第二个（required）参数（实际上，就像我之前说的，你应该将指针传递给您为侦听器注册的原始函数。

希望这至少有助于解释您收到的错误是怎么回事。

祝你好运！

Answer 2

removeEventListener 需要两个参数，type 和 listener。 type 指定要删除事件侦听器的事件类型和 listener 是要从事件目标中移除的事件处理程序的 EventListener 函数。

所以试着用 null 代替 listener 像这样

this.monthRef.current.removeEventListener('scroll',null)

希望有用。

React Testing Library TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present

React Testing Library TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present

reactjs

jestjs

react-testing-library