Компонент My Parent отображает компонент <Child1 /> на основе состояния { conditionMet : true }.
Как мне написать тест, который проверяет рендеринг дочернего компонента как таковой, а не рендеринг строки внутри компонента? Я бы не хотел использовать setTimeout().
Проблема в том, как я построил тест? Или как я построил компонент? Есть ли известное ограничение или ошибка в Jest / Enzyme, которые не позволяют проверить, отрисован ли дочерний компонент?
Реакция: 16.6.3 Шутка: 23.6.0 Фермент: 3.7.0 Фермент-адаптер-реакция-16
Юнит-тест Jest для ParentComponent:
describe('ParentComponent', () => {
test('renders Child1 component when conditionMet is true', () => {
const parentMount = mount(<ParentComponent />);
const param1 = "expected value";
const param2 = true;
parentMount.instance().checkCondition(param1, param2); // results in Parent's state 'conditionMet' === 'true'
//This is not working - the length of the Child1 component is always 0
expect(parentMount.find(Child1)).toHaveLength(1);
//This alternate option passes, but it's not testing the rendering of the component!
expect(parentMount.text()).toMatch('Expected string renders from Child1');
});
});
ParentComponent.js
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
conditionMet: false
};
}
checkCondition = (param1, param2) => {
if (param1 === 'expected value' && param2 === true)
{
this.setState({conditionMet: true});
} else {
this.setState({conditionMet: false});
}
this.displayChildComponent();
}
};
displayChildComponent() {
if (this.state.conditionMet) {
return(
<Child1 />
)
}
else {
return(
<Child2 />
)
}
}
render() {
return (
<div className = "parent-container">
{this.displayChildComponent()}
</div>
);
}
}



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


Думаю, это может оказаться долгим решением. Но это работает.
Отправьте опору дочерним элементам, которые являются функцией, вызовите эту функцию, когда дочерний элемент установлен.
Установить как,
<Clild1 sendConfirmation = {this.receiveConfirmation.bind(this)} />
В родительском:
receiveConfirmation(e, rendered_child){ this.setState({rendered_child}) }
В Child1:
componentDidMount(){this.props.sendConfirmation(1);}
Теперь, если вы можете проверить состояние Parent, вы всегда можете проверить значение this.state.rendered_child.