Question

我有一个Users 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();  
  });

Answer 1

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

对于上述两种解决方案，请确保它们都在wrapper语句之上。

AddEventListener DOM事件开玩笑测试

1 个答案: