AddEventListener DOM 事件 Jest 测试答案

【问题标题】：AddEventListener DOM event Jest testingAddEventListener DOM 事件 Jest 测试
【发布时间】：2020-12-30 18:52:05
【问题描述】：

我有一个 Users vue 组件，我正在尝试使用 addEventListener 测试 mount()。

 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();
      }
    });
}

我已经为用户组件编写了规范，并尝试使用 addEventListener 测试 mount() 方法。但是我收到一条错误消息，无法读取 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();  
  });

【问题讨论】：

标签： vue.js mocking jestjs spyon

【解决方案1】：

我认为这里的问题可能是你在创建组件之后创建模拟函数。 Mounted 方法将在创建包装器时调用，因此请尝试将模拟实现移动到包装器语句上方。
另一种使其工作的可靠方法是在您创建包装器之前设置文档的正文，如 document.body.innerHTML = <div id="users-list"></div>。这肯定会奏效。

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

【讨论】：