React 구성 요소가 렌더링되었는지 테스트합니다.

Question

Enzyme/Jest를 사용하여 테스트하려고하는 React 구성 요소가 있습니다. 구성 요소가 렌더링되었는지 확인하는 데 가장 적합한 테스트가 무엇인지 알아 내려고 노력 중입니다.

내 구성 요소에는 shouldRender이라는 단 어가 있으며, false 일 경우 구성 요소가 렌더링되지 않습니다. 내 구성 요소는 다음과 같습니다 : 구성 요소가 렌더링되지 않는,

import React from 'react'; 
import { shallow } from 'enzyme'; 
import MyComponent from '../MyComponent'; 

describe('MyComponent',() => { 
    it('Should render if we want it to',() => { 
    const component = shallow(<MyComponent shouldRender />); 

    expect(component).toBeDefined(); // Passes 
    }); 

    it('Should not render if we do not want it to',() => { 
    const component = shallow(<MyComponent />); 

    expect(component).not.toBeDefined(); // Does not pass, as component isn't undefined. 
    }); 
}); 

내가 두 번째 테스트가 실패하고 싶습니다 :이처럼 보이는 검사를

import React from 'react'; 

const propTypes = { 
    shouldRender: React.PropTypes.bool, 
}; 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     foo: 'bar', 
    }; 
    } 

    render() { 
    if (!this.props.shouldRender) { 
     return null; 
    } 

    return (
     <div> 
     <span>My component</span> 
     </div> 
    ); 
    } 
} 

MyComponent.propTypes = propTypes; 

export default MyComponent; 

. 구성 요소가 렌더링되었는지 여부를 테스트하는 더 좋은 방법이 있습니까?

필요한 경우 더 많은 정보를 제공해주기 바랍니다.

감사합니다.

Answer 1

그래서 나는 어떤 사람들과 대화를 나누었을 것이고, 아마도 내가 잘못된 방향으로 가고 있다고 결정했습니다.

상위 컴포넌트가 렌더링하는지 여부를 확인하는 것이 좋습니다. 그렇지 않은 경우 MyComponent을 사용할 때마다이 shouldRender을 전달해야합니다.

MyComponent 지금은 다음과 같습니다 MyComponent은 다음과 같습니다 사용

import React from 'react'; 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     foo: 'bar', 
    }; 
    } 

    render() { 
    return (
     <div> 
     <span>My component</span> 
     </div> 
    ); 
    } 
} 

MyComponent.propTypes = propTypes; 

export default MyComponent; 

및 MyParentComponent :뿐만 아니라 더 재사용 할 MyComponent을 허용 않습니다

import React from 'react'; 

const propTypes = { 
    myComponent: React.PropTypes.bool, 
}; 

class MyParentComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     boz: 'baz', 
    }; 
    } 

    render() { 
    return (
     <div> 
     { this.props.myComponent && 
      <MyComponent /> 
     } 
     </div> 
    ); 
    } 
} 

export default MyComponent; 

를, 그것은 테스트에 대한 필요성을 제거한다 나는 모두 쓰고 싶었다. 이걸 보신 모든 분들께 감사드립니다.

Answer 2

Jest의 스냅 샷 테스트가 필요하다고 생각합니다. 테스트가 실패 할 때 스냅 샷 테스트를 통해 의도 된 변경 사항인지 의도하지 않은 변경 사항을 확인할 수 있습니다. 그들의 예를 확인하십시오. here