He estado trabajando en una aplicación React con un nuevo equipo y surgió la discusión sobre cómo escribir pruebas unitarias para componentes que activan métodos en eventos window.scroll.

Entonces, tomemos este componente como ejemplo.

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    window.addEventListener('scroll', this.props.myScrollMethod);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.props.myScrollMethod);
  }

  render() {
    return (
      <div>
        <h1>Hello MyComponent!</h1>
      </div>
    )
  };
};

export default MyComponent;

Como puede ver, estoy tomando un método que se pasa al componente a través de un accesorio y lo enlazo al detector de eventos de ventana, donde el evento esscroll. En el mundo real este componente llamaríamyScrollMethod a medida que el usuario se desplaza hacia abajo en una página (supongamos que el caso de uso aquí es mostrar una barra de navegación fija cuando el usuario se ha desplazado más allá de cierto punto en la página).

El problema es ... Necesito encontrar una forma adecuada de probar esto. Mi objetivo final es crear un método espía que se pasa al componente a través demyScrollMethod prop, luego desencadenar un desplazamiento (o simular un desplazamiento en la prueba) y finalmente afirmar si el método del controlador de desplazamiento se ha activado o no. Aquí está mi intento de esto:

import React from 'react';
import sinon from 'sinon';
import expect, { createSpy }  from 'expect';
import { shallow } from 'enzyme';

import MyComponent from './MyComponent';

describe('The <MyComponent /> component', () => {
  let onScroll;
  let MyTestComponent;

  beforeEach(() => {
    onScroll = createSpy();
    MyTestComponent = shallow(
      <MyComponent
        myScrollMethod={onScroll}
        />
    );
  });

  it('Should call the onScroll method when a user scrolls', () => {
    expect(onScroll).toNotHaveBeenCalled();
    window.dispatchEvent(new window.UIEvent('scroll', { detail: 0 }));
    expect(onScroll).toHaveBeenCalled();
  });
});

El problema que estoy teniendo es que la afirmación final está fallando porque nunca se llama al espía. Me he referido a otras publicaciones en este sitio pero hasta ahora no he encontrado una solución adecuada. Cualquier sugerencia sería muy apreciada ya que ha estado atormentando mi cerebro por un tiempo.

¡Muchas gracias!