Как тестировать компонент кнопки в React?

Всем привет!
Есть компонент Button:

const Button = (props) => {
    return (
        <button
            disabled={props.disabled}
            type="button"
            onClick={props.action}
        >
            {props.children}
        </button>
    );
};


Написал такой тест:

import React from 'react';
import { shallow, mount } from 'enzyme';

import Button from './Button';

describe('<Button />', () => {
    let wrapper, actionMock;

    beforeEach(() => {
        actionMock = jest.fn();
        wrapper = shallow(<Button action={actionMock}>Cancel</Button>);
    });

    it('should render correctly', () => {
        expect(wrapper.find('button')).toHaveLength(1);
        expect(wrapper.text()).toEqual('Cancel');
    });

    it('action function should be invoked after click', () => {
        wrapper.find('button').simulate('click');
        expect(actionMock).toHaveBeenCalled();
    });

    it('should not react on click if disabled prop was passed ', () => {
        wrapper = shallow(<Button action={actionMock} disabled={true}>Cancel</Button>);

        expect(wrapper.props().disabled).toEqual(true);

        wrapper.find('button').simulate('click');
        expect(actionMock).not.toHaveBeenCalled();
    });
});


Но последний тест не проходит, так как кнопка не получает аттрибут disabled, соответственно при симуляции клика, обработчик вызывается. Пробовал по разному передавать пропс disabled и как true, и как disabled. Использовал методы shallow и mount. Ничего не получается.

И второе - если в самом компоненте Button добавить console.log(props), а в тестах передавать какой-то произвольный пропс, например test="test", то он не выводится в консоль, а только action и disabled, хотя последний и не работает как нужно.

P.S. Первый вопрос снимается - при использовании mount тест прошел, второй все еще актуален.
  • Вопрос задан
  • 571 просмотр
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
В комментарии к вопросу ответил про консоль лог, а по поводу клика - похоже что это баг в enzyme:
1) https://github.com/airbnb/enzyme/issues/749
2) https://github.com/airbnb/enzyme/issues/386

поэтому, можно воспользоваться в тесте просто проверкой, что disabled атрибут есть у кнопки если вы его передали в props (релевантная инфа здесь - https://github.com/airbnb/enzyme/issues/336 )
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы