my react component is working properly but the jest test fails

Question

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

Ahmed Mahboub · Accepted Answer · 2020-04-04 22:17:36Z

2

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

answered Apr 4, 2020 at 22:17

Ahmed Mahboub

2841 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

my react component is working properly but the jest test fails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related