Как использовать jest.spyOn с функциональным компонентом реакции - PullRequest
Новая
       6

Как использовать jest.spyOn с функциональным компонентом реакции

0 голосов
/ 17 января 2020

Я хочу проверить, вызывается ли handleAddBookToCart function, когда я нажимаю на кнопку, используя Jest.spyOn.

Заранее благодарю за помощь. 

const HomeComponent = props => {
    const { addBookToCart } = props;

    const handleAddBookToCart = id => {
       addBookToCart(id);
    };

    return (
        <button onClick={() => handleAddBookToCart(id)}></button>
    )
}

//Container
const mapDispatchToProps = dispatch => ({
    addBookToCart: idBook => dispatch(cartOperations.addBookToCart(idBook))
});

//file test
describe('Test home component', () => {
   let container;
   let wrapper;
   let component;

   beforeEach(() => {
       wrapper = mount(
           <Provider store={store}>
               <HomeContainer />
           </Provider>
    );
    container = wrapper.find(HomeContainer);
    component = container.find(HomeComponent);

it('calls the handleAddBookToCart function when the button is clicked', () => {
    const spy = jest.spyOn(???)
    component.find('button').simulate('click');
    expect(spy).toHaveBeenCalled();
});

Ответы [ 2 ]

2 голосов
/ 17 января 2020

Если вы должны использовать spyOn? Вы можете просто передать шутку с надписью fn как addBookToCart prop 


it('calls the handleAddBookToCart function when the button is clicked', () => {
   const props = {
     addBookToCart: jest.fn(),
     ...your other props
   }
   const component = shallow(<HomeComponent {...props} />)
    component.find('button').simulate('click');
    expect(props.addBookToCart).toHaveBeenCalled();
});
1 голос
/ 17 января 2020

Простым способом было бы отправить макет в свойство addBookToCart и шпионить за ним при нажатии кнопки.

Поэтому, когда вы создаете / монтируете / очищаете свой компонент для модульного теста, попробуйте следующее (монтируется из фермента, но вы можете использовать свой существующий метод тестирования компонентов): 

const spy = jest.fn();
const component = mount(<HomeComponent addBookToCart={spy} />);
...