Hola, no sé cómo simular una función en línea en el elemento secundario del componente React
Mi pila: sinon , chai , enzyme ;
Uso de componentes:
<ListItem onClick={() => someFn()} />Render del componente:
render() { return ( <li> <a href="#" onClick={e => { e.preventDefault(); this.props.onClick(); }} > whatever </a> </li> ); } Aquí tenemos la función onClick que llama a e.preventDefault() . ¿Cómo decirle a <a href> ( link ) que no llame a e.preventDefault() ? ¿Cómo puedo simular un onClick ?
A continuación se muestra 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); //will be fine if we remove e.preventDefault() });Error de salida de la prueba:
TypeError: Cannot read property 'preventDefault' of undefinedPrueba esto
link.simulate('click', { preventDefault: () => { } }); 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(); });Para aquellos que usan Jest y @testing-library o react-testing-library s fireEvent , debe proporcionar un objeto de evento inicializado; de lo contrario, el evento no se puede enviar a través de su elemento.
Luego, 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(clickEvent.preventDefault).toHaveBeenCalledTimes(1); }); De manera similar para stopPropagation .
La respuesta de Anton Karpenko para Jest fue útil.