如何在 vue jest 中使用 addEventListener 模拟元素答案

【问题标题】：How to mock element with addEventListener in vue jest如何在 vue jest 中使用 addEventListener 模拟元素
【发布时间】：2020-12-12 05:00:22
【问题描述】：

我正在测试下面使用 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 方法。

【问题讨论】：

标签： vue.js mocking jestjs addeventlistener

【解决方案1】：

我在你的测试中找不到任何期望。所以我想如果你想测试它应该调用带有值滚动的 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);

【讨论】：