Использование Jest для тестирования метода компонента React

Question

У меня есть компонент контейнера, ответственный за предоставление функциональных возможностей сохранения для компонента компонента дочерней формы. Я пытаюсь использовать Jest & Enzyme (мне кажется, мне нужен фермент?), Чтобы проверить, запускает ли дочерний компонент функцию, переданную из родительского компонента. Эти два метода выглядеть так:

class Parent extends Component { 
 
    handleSave = (someData) => (
 
    /* do some ajax with someData */ 
 
) 
 
    render() { 
 
    return(
 
     <ChildComponent {...this.props} handleSave={this.handleSave} /> 
 
    ) 
 
    } 
 
} 
 

 
class ChildComponent extends Component { 
 
    render() { 
 
    <form onSubmit={this.props.handleSave}> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    } 
 
}

И тест:

import React from 'react' 
 
import ParentContainer from '../src/ParentContainer' 
 

 
describe('<ParentContainer />',() => { 
 

 
    it('Should fire handle save when PatientScheduler form saves',() => { 
 
    const component = mount(<ParentContainer />) 
 
    component.handleSave = jest.fn() 
 
    component.find('[type="submit"]').simulate('click') 
 
    expect(component.handleSave).toHaveBeenCalled() 
 
    }) 
 

 
})

Сообщение отказ я получаю Expected mock function to have been called.

Я чувствую, что я на 90% оттуда. Что здесь не так? Спасибо.

Answer 1

Проблема заключается в том, что имитация не запускает событие щелчка, а работает wrapper.prop('click')(). Формируем документы:

Общие Gotchas

В настоящее время моделирование событий для мелкой визуализатора не распространяться как можно было бы ожидать, как правило, в реальной среде. В качестве результата необходимо называть .simulate() фактическим узлом, который имеет набор обработчиков событий .

Даже если название будет означать, это имитирует фактическое событие, .simulate() будет на самом деле цель пропеллер компонента на основе события вы даете ему. Например, .simulate('click') будет на самом деле получить onClick опора и назвать его.

Таким образом, вы можете либо запустить component.find('form').simulate('submit') или component.find('form').prop('onSubmit')()