How to test rendered html of a react component

Question

I want to write a test suite when isPending: true

render(){
const {onSearchChange, isPending } = this.props;
if(isPending){
  return(<h1>Loading</h1>    
  )
}else{
  return (
    <div className="App"> 
      <Scroll>
        <ErrorBoundry>
          <CardList robots={this.filteredRobots()}/>
        </ErrorBoundry>
      </Scroll>
    </div>
  )
}

}

below is test suite that i have written

it('return none when pending is true', () => {
const mockProps3 = {
    getRobots: jest.fn(),
    robots: [],
    searchField: '',
    isPending: true
}

const wrapper3 = shallow(<MainPage {...mockProps3} />);
//expect(wrapper3.equals(<h1>Loading</h1>)).to.equal(true);
expect(wrapper3.html()).to.equal('<h1>Loading</h1>');

})

But getting the below error in both cases

TypeError: Cannot read property 'equal' of undefined

Possible duplicate of [TypeError: Cannot read property 'equal' of undefined](https://stackoverflow.com/questions/39926517/typeerror-cannot-read-property-equal-of-undefined) — skyboyer, May 30 '19 at 20:18

score 0 · Answer 1 · edited Apr 12 '20 at 07:47

0

Try writing this test

expect(wrapper3.find('h1').html()).toEqual('<h1>Loading</h1>')
})

edited Apr 12 '20 at 07:47

Mark Rotteveel

100,966
191
140
197

answered Apr 12 '20 at 07:25

abbi

1

How to test rendered html of a react component

1 Answers1