我的反应组件正常工作，但玩笑测试失败

Question

我这里有一个简单的react组件，它可以在浏览器上正确呈现，但是当我编写一个简单的测试时，它失败了，因为我知道我做了一个propTypes测试，并且成功了，并且我做了一个快照测试，并且生成的快照是正确的

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>

    );
}

}

测试代码：

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

测试结果是预期：1收到：0

Answer 1

您缩成Id而不是id因此您的测试代码将是

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