时间戳

首页 > 解决方案 > 如何在 vue jest 中使用 addEventListener 模拟元素

vue.js - 如何在 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 方法。

标签： vue.jsmockingjestjsaddeventlistener

解决方案

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

推荐阅读