my react component is working properly but the jest test fails

Viewed 279

I have this simple react component here and it renders correctly on the browser but when I wrote a simple test it failed, knowing that I did a propTypes testing and it succeeded and I did a snapshot test and the produced snapshot was a correct one

class Song extends Component{

constructor(props){
    super(props);
    this.state={
        hover : false,
        track:this.props.track,
        albumName:'',
        playing:false,
        displayDropdown:false,
        saved:false,
        queued:false,
        clicked:false
    };
}

render(){
    return(
            <button 
                data-testId='song' 
                className="song row" 
                id='song' 
                onMouseEnter={this.hover} 
                onMouseLeave={this.notHover}>
             </button>

    );
}

}

testing Code:

    import React from 'React'
    import Song from './song'
    import {shallow, configure} from 'enzyme'
    import Adapter from 'enzyme-adapter-react-16';
    import renderer from 'react-test-renderer';
    import checkPropTypes from 'check-prop-types'
    configure({adapter: new Adapter()});
    it('renders the song component', ()=>{
    const song = shallow(<Song {...fullProps}/>);
    const songComp = song.find(`[data-testid="song"]`)
    expect(songComp.length).toBe(1);  
  })

the result of the test is Expected: 1 Received: 0

1 Answers

you should make it Id not id so your test code will be

  import React from 'React'
    import Song from './song'
    import {shallow, configure} from 'enzyme'
    import Adapter from 'enzyme-adapter-react-16';
    import renderer from 'react-test-renderer';
    import checkPropTypes from 'check-prop-types'
    configure({adapter: new Adapter()});
    it('renders the song component', ()=>{
    const song = shallow(<Song {...fullProps}/>);
    const songComp = song.find(`[data-testId="song"]`)
    expect(songComp.length).toBe(1);  
  })
Related