How to pass props into jest test in React

5
votes

I'm new to React and testing. I'm trying to test a component that has a conditional render: 

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>
)}

} }

In my test, I'm trying to pass the this.props.fetched into the wrapper to test that shows up after fetched=true. Right now this is my test:

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

But my test keeps failing, so I must not be passing props in. What is the proper way to do this? Thanks!

2
reactjsjestjsenzyme

2 Answers

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

then you can do the same thing either omitting fetched or setting to false

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

Use mount instead of shallow that should fix your problem. or you can alternatively try with wrapper.update() keeping the shallow (I'm not sure about this).

FYR: Diff between Shallow and Mount