Это моя составляющая. По сути, это оболочка для другого компонента. У меня вопрос: как мне провести модульное тестирование этого компонента? Помимо проверки состояния и вызова двух методов и проверки того, что они обновляют состояние.
Кроме того, кажется, что это просто рендеринг реквизита / состояния, так есть ли необходимость это тестировать?
import React from 'react';
import { PropTypes as PT } from 'prop-types';
export default Wrapped =>
class extends React.Component {
static propTypes = {
numOne: PT.number,
};
constructor(props) {
super(props);
this.state = {
showModal: false,
};
}
openModal = () => {
this.setState({
showModal: true,
});
};
closeModal = () => {
this.setState({
showModal: false,
});
};
render() {
return (
<Wrapped
numberValue = {this.props.numOne}
showHolidayModal = {this.state.showHolidayListModal}
showModal = {this.openModal}
closeModal = {this.closeModal}
{...this.props}
/>
);
}
};
Это мой компонент (просто пример), который я также тестирую, он отображает то, что передается в
import React from 'react';
import { PropTypes as PT } from 'prop-types';
import container from './container';
import { Card, Button, Modal } from '../common';
export const Leave = props => {
return (
<div>
<span>Dummy data : {props.numberValue}</span>
{props.showModal && <Modal />}
<Button onClick = {props.closeModal} label = "close" />
</div>
);
};
Leave.propTypes = {
numberValue: PT.number,
showModal: PT.bool,
openModal: PT.func,
closeModal: PT.func,
};
export default container(Leave);
Нет, работает нормально. См. Строку «экспорт контейнера по умолчанию (Оставить)». Моя команда решила использовать структуру функций высшего порядка для наших компонентов.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Может быть что-то вроде этого. Вы должны протестировать оболочку для рендеринга обернутого компонента с его реквизитами. Также проверьте свои функции, обновляющие состояние.
const Bar = props => <span />
const Test = container(Bar)
const wrapper = shallow(<Test prop1 = {1} prop2 = {2}>)
const bar = wrapper.find(Bar)
expect(bar).to.have.length(1)
expect(bar.props()).contains({ prop1: 1, prop2: 2})
bar.props().showModal()
expect(wrapper.state().showModal).to.be(true)
ваш компонент
Wrappedотображает внутри себяWrapped? Это бесконечная рекурсия?