Question

长话短说，我有一个React应用程序，它正在导入vanilla.js组件。该组件与React应用程序外部的DOM交互，但是有时React应用程序需要使用该组件。当我尝试浅化渲染导入Login组件的React组件时，Jest挂在vanilla.js Login组件中的'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 |   };

所以我有我的应用程序：

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 Doc所讲的，我所需要的只是一个简单的字符串，如'mock 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() }));

由于使用“ addEventListener”导入了脚本，因此酶无法进行浅渲染

1 个答案: