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

は、私は2番目のテストが失敗したい：私はこのようになりますテストを持って

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 propを渡す必要があります。

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