Как проверить, что дочерний компонент отображается на основе состояния родительского компонента?

Компонент 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>
    );
  }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
629
1

Ответы 1

Думаю, это может оказаться долгим решением. Но это работает.

Отправьте опору дочерним элементам, которые являются функцией, вызовите эту функцию, когда дочерний элемент установлен.

Установить как,

<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.

Другие вопросы по теме