如何在Vue Jest中使用addEventListener模拟元素

如何解决如何在Vue Jest中使用addEventListener模拟元素

我正在测试以下使用addEventListener的以下方法，

    async testMethod(){
    const studentList = document.querySelector("#student_list");
    if(studentList != null) {
    studentList.addEventListener("scroll",e => {
         if (studentList.scrollTop + studentList.clientHeight >= studentList.scrollHeight) {
            this.UpdateStudentDetails();
         }
    })
    }


Spec file for the above method is,it('should respond for scroll event',async () => {
        const mockedResponse = {
          scrollTop: 100,scrollHeight: 300
        }
        const mockedListElements:any = { scrollTop: 100,clientHeight: 200,scrollHeight: 300,addEventListener: jest.fn }
        jest.spyOn(document,'querySelector').mockImplementation(() => mockedListElements)
        const listnerSpy = jest.spyOn(mockedListElements,'addEventListener');
        mockedListElements.addEventListener("scroll",new Event("test"))
        listnerSpy.mockReturnValue(mockedResponse);
    }

在这里，我能够获取studentList的数据，但是无法测试addEventListener方法。

解决方法

我在您的考试中找不到任何期望。因此，我想如果您想测试它是否应使用值滚动调用addEventListener，请尝试执行此操作。

const mockAddeventListener = jest.fn().mockImplementation((event,fn) => {
  fn();
})
document.querySelector = jest.fn().mockReturnValue({
  scrollTop: 100,clientHeight: 200,scrollHeight: 300,addEventListener: mockAddeventListener 
})
jest.spyOn(wrapper.vm,'UpdateStudentDetails');
            
wrapper.vm.testMethods();
            
expect(mockAddeventListener).toBeCalledWith('scroll',expect.anything());
expect(wrapper.vm.updateDetail).toBeCalledTimes(1);