Всем привет!
Есть компонент 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 тест прошел, второй все еще актуален.
Простой