Vue.js AddEventListener DOM事件Jest测试

我有一个用户vue组件，我正在尝试使用addEventListener测试mounted（）

 Users.vue
 =========
 
 mounted(){
 
 let viewPort = document.getElementById("Users-list"); ----> Here I am getting null for addEventListener.
    viewPort!.addEventListener("scroll", (e: any) => { 
      let result =
        e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight ===
        0;
      if (result) {
        this.test = this.Offset + this.Limit;
        this.response = this.GetDetails();
      }
    });
}

我已经为Users组件编写了规范，并尝试使用addEventListener测试mounted（）方法。 但我收到一条错误消息，无法读取null的属性addEventListener

Users.spec.ts
=============
describe('Users TestSuite', async () => {

  let userWrapper: any;
  let userObj: any;
  beforeEach(() => {
    userWrapper = shallowMount(Users, {
     // attachTo: document.getElementById('Users-list'),
      localVue,
      i18n,
      router
    })
    userObj = userWrapper.findComponent(Users).vm;
    const mockAddeventListener = jest.fn().mockImplementation((event, fn) => {
        fn();
      })
      document.getElementById = jest.fn().mockReturnValue({
        scrollTop: 100,
        clientHeight: 200,
        scrollHeight: 500,
        addEventListener: mockAddeventListener
      })
     expect(mockAddeventListener).toBeCalledWith('scroll', expect.anything());
 });
 
 it('should render Users page', () => {
    expect(userObj).toBeTruthy();  
  });

我认为这里的问题可能是在创建组件之后创建模拟函数。创建包装器时将调用Mounted方法，因此请尝试将模拟实现移到包装器语句上方

另一种确保它工作的方法是在创建包装器之前设置文档的主体，如document.body.innerHTML=

。这肯定会奏效的

对于以上两种解决方案，请确保它们位于包装器语句之上