Как сдать реквизит в шутку в React

Question

Я новичок в React и тестировании. Я пытаюсь протестировать компонент с условным рендерингом:

render() {
if (this.props.fetched === true){
  return (
    <div className="search">
      <div className="">
        <SearchBar getCountry={this.getCountry} /> <br/>
        <Results country={this.props.country}/>
      </div>
    </div>
  );
} else { return (
    <div className="search">
      <div className="">
        <SearchBar getCountry={this.getCountry} /> <br/>
      </div>
    </div>
)}

} }

В моем тесте я пытаюсь передать this.props.fetched в оболочку для проверки, которая появляется после fetched = true. Прямо сейчас это мой тест:

it('renders results after search', () => {
  const fetched = true;
  const wrapper = shallow(<Search store={store} {...fetched}/>);
  expect(wrapper.find('Results').length).toEqual(1);
});

Но мой тест продолжает проваливаться, поэтому я не должен пропускать реквизит. Как правильно это сделать? Спасибо!

Answer 1

it('renders results after search', () => {
  const fetched = true;
  const wrapper = mount(<Search store={store} {...fetched}/>);
  expect(wrapper.find('Results').length).toEqual(1);
});

Используйте mount вместо shallow, что должно решить вашу проблему. или вы можете попробовать wrapper.update() оставить shallow (я не уверен в этом).

БЮР: Разница между мелководьем и горой

Answer 2

it('renders results after search', () => {
  const fetched = true;
  const wrapper = shallow(<Search store={store} fetched={fetched} />);
  expect(wrapper.find('Results').length).toEqual(1);
});

тогда вы можете сделать то же самое, либо пропустив fetched, либо установив значение false