유닛 테스트 리팩토링 컴포넌트를 자체 참조로 사용

Question

React JSX 컴포넌트의 테스트 프레임 워크에 새로운 것이므로 구성 요소가 올바르게 렌더링되는지 테스트 할 때 한 가지 문제가 발생했습니다. 그것의 render 방법 안에 ref에 this을 포함하고 나는 그것을 어떻게 단위 테스트 (또는 시험을 실패하지 않도록 무시)하는 방법을 모르겠다.

나는 chai을 테스트에 사용하고 있습니다.

이

는 구성 요소입니다

export default class TopTooltip extends Component { 
    render() { 
    const { ident, title} = this.props; 

    return (
     <Tooltip 
     className={`${className} top-banner-tooltip`} 
     id={ident} 
     ref={this} 
     > 
     foo 
     </Tooltip> 
    ); 
    } 
} 

... 그리고 내 단위 테스트 :

import { expect } from 'chai'; 
import { Tooltip } from 'react-bootstrap'; 
import { shallow } from 'enzyme'; 

describe('TopTooltip',() => { 
    describe('renders',() => { 
    it('all injected values',() => { 
     const t = (<TopTooltip 
     title="tooltip" 
     ident="xyz" 
     className="myClass" 
     />); 

     const comp = shallow(t); 

     expect(comp.find(Tooltip).at(0).node) 
     .to.equalJSX(
     <Tooltip 
      className="myClass top-banner-tooltip" 
      id="xyz" 
      ref={t.this} 
     > 
      <span className="title">tooltip</span> 
      foo 
     </Tooltip> 
    ); 
    }); 
    }); 
}); 

그러나,이 참조가 예상되지 않는 때문에 실패

expected ref={[object Object]} 
but got ref={undefined} 

누구든지이 문제를 도와 줄 수 있습니까? 테스트 도중이 참조를 무시하도록 지정하는 것이 좋습니다.

Answer 1

당신은이 같은 시도 할 수 있습니다 :

it('should contain <Tooltip/>',() => { 
    const component = shallow(<TopTooltip/>); 

    expect(component).to.contain(<Tooltip/>); 
}); 


it('should correctly render',() => { 
    const component = shallow(<Tooltip className="myClass"/>); 

    expect(component).to.have.className('myClass'); 
    expect(component).to.contain(<span className="title">tooltip</span>); 
}); 

제대로 설치했다고 가정 차이 효소

import chai, { expect } from 'chai'; 
import chaiEnzyme from 'chai-enzyme'; 

chai.use(chaiEnzyme());