javascript - 由于使用 'addEventListener' 导入的脚本， enzyme 无法浅渲染

Question

长话短说，我有一个正在导入 vanilla.js 组件的 React 应用程序。该组件在 React 应用程序外部与 DOM 交互，但有时 React 应用程序需要使用该组件。当我尝试浅渲染导入登录组件的 React 组件时，Jest 卡在 vanilla.js 登录组件中的“addEventListener”上:

TypeError: Cannot read property 'addEventListener' of null

  90 |     }
  91 |
> 92 |     document.querySelector(config.selectors.loginModal).addEventListener('click', (e) => closeLogin(e));
     |     ^
  93 |     document.querySelector(config.selectors.loginClose).addEventListener('click', (e) => closeLogin(e));
  94 |   };

所以我有了我的 React 应用程序:

import React from 'react';
import Login from '../login';
const Component = () => {
  return (
    <h3>
      <span className='cc-stats-login-btn' onClick={(e) => 
      Login.openRegister(e, 'Statistics')}>Register</span>
      or
      <span className='cc-stats-login-btn' onClick={(e) => Login.openLogin(e, 'Statistics')}>login</span>
      to view advanced analytics and graphs
    </h3>
  );
};

该应用的测试目前看起来像:

document.body.innerHTML =
  '<div class="login-modal-bg">' +
  '  <div class="login-modal-close"></div>' +
  '</div>';

describe('<Component />', () => {
  test('renders', () => {
    const wrapper = shallow(
      <Component />
    );
    expect(wrapper.exists()).toBe(true);
  });
});

Jest 似乎失败的登录组件的 js:

const Login = (() => {
  const config = {
    selectors: {
      loginModal: '.login-modal-bg',
      loginClose: '.login-modal-close'
    }
  };

  [...]

  const initialize = () => {
    document.querySelector(config.selectors.loginModal).addEventListener('click', (e) => closeLogin(e));
    document.querySelector(config.selectors.loginClose).addEventListener('click', (e) => closeLogin(e));
  };
};

据我所知，基于 Jest 文档，我只需要一个简单的字符串作为“模拟 dom”，addEventListener 应该可以工作。但我得到的只是上面的TypeError。有什么想法吗？

Answer 1

在单元测试中针对 DOM 进行测试(它在 Jest 中不是真实的，因为它使用 JSDOM)提供了额外的事件部分。 document.querySelector 可以改为模拟:

const loginModalMock = jest.fn();
const loginCloseMock = jest.fn();

jest.spyOn(document, 'querySelector')
.mockReturnValue()
.mockReturnValueOnce({ addEventListener: loginModalMock })
.mockReturnValueOnce({ addEventListener: loginCloseMock })

const wrapper = shallow(
  <Component />
);

...

在这种特定情况下，document.querySelector 未在测试模块中使用。使用它的模块可以在测试文件的顶部被模拟:

jest.mock('.../login', () => ({ openLogin: jest.fn() }));