unit testing - react - Cómo burlarse de e.preventDefault en el hijo del componente de reacción

preventdefault react

Question

Realmente no sé cómo simular una función en línea en el hijo del componente de reacción

Mi pila: sinon , chai , enzyme ;

Uso de componentes:

<ListItem onClick={() => someFn()} />

Procesamiento del componente:

render() {
    return (
      <li>
        <a href="#" onClick={e => {
            e.preventDefault();
            this.props.onClick();
          }}
        > whatever </a>
      </li>
    );
  }

Aquí tenemos onClick que llama a e.preventDefault() . ¿Cómo saber si <a href> ( link ) no llama a e.preventDefault() ? ¿Cómo puedo burlarme de que onClick ?

A continuación lo que he probado en las pruebas:

Configuración de copia superficial

function setup() {
  const someFn = sinon.stub();

  const component = shallow(
    <ListItem
      onClick={() => {
        someFn();
      }}
    />
  );

  return {
    component: component,
    actions: someFn,
    link: component.find(''a''),
    listItem: component.find(''li''),
  }
}

Y la prueba

  it(''simulates click events'', () => {
    const { link, actions } = setup();
    link.simulate(''click''); //Click on <a href>
    expect(actions).to.have.property(''callCount'', 1); //would be good if we''ll remove e.preventDefault()
  });

Error de salida de la prueba:

TypeError: Cannot read property ''preventDefault'' of undefined

Answer 1

Para aquellos que usan FireEvent de Jest y react-testing-library , debe proporcionar un objeto de evento inicializado, de lo contrario, el evento no se puede enviar a través de su elemento.

Entonces se puede afirmar que se llama a e.preventDefault asignando una propiedad a ese evento inicializado:

test(''prevents default on click'', () => {
  const {getByText} = render(<MyComponent />);
  const button = getByText(/click me/);

  // initialise an event, and assign your own preventDefault
  const clickEvent = new MouseEvent(''click'');
  Object.assign(clickEvent, {preventDefault: jest.fn()});

  fireEvent(button, clickEvent);

  expect(event.preventDefault).toHaveBeenCalledTimes(1);
});

Del mismo modo para stopPropagation .

La respuesta de Anton Karpenko para Jest fue útil.

Answer 2

Prueba esto

link.simulate(''click'', {
  preventDefault: () => {
  }
 });

Answer 3

Solo para tener en cuenta que esto es un problema solo cuando se utiliza shallow procesador de enzimas shallow . En el caso de un mount procesador DOM completo, el objeto de evento contiene el método preventDefault , por lo que no tiene que burlarse de él.

Answer 4

Sugeriría crear un nuevo objeto basado en jest.fn () con

const event = Object.assign(jest.fn(), {preventDefault: () => {}})

entonces úsalo:

element.simulate(''click'', event);

Answer 5

 test(''simulates click events'', () => {
    const e = { stopPropagation: jest.fn() };
    const component = shallow(<ListItem{...props} />);
    const li = component.find(''li'').at(0).childAt(0)
    li.props().onClick(e)

    expect();
  });