他のReactコンポーネントのメソッドによって返されたReactコンポーネントの戻り値

Question

ここにサンプルコードがあります。<MyComponent />にはgetHeaderというメソッドがあります。私はgetHeaderメソッドを試そうとしています。

const Header = ({title})=> { 
    return <Header> {title} </Header> 
} 

export class MyComponent extends React.Component { 
    getHeader(title) { 
    return <Header title={title} /> 
    } 
    render() { 
    return <div>{ this.getHeader()}</div> 
    } 
} 

そして、ここでのテストで、私はgetHeader()方法

const myComponent = shallow(<MyComponent />); 
const header = myComponent.instance().getHeader('hello'); 

// the following code always fails. Any suggestion 
expect(shallow(header).instance()).to.be.instanceOf(Header); 

Answer 1

をテストしたいそこより良い方法は、おそらくですが、これは渡し：

let header = new MyComponent().getHeader('test') 

expect(header).to.deep.equal(<Header title="test" />) 

注：これは依存しませんコンポーネントのレンダリング時には、純粋にゲッターをテストしています。

私はこのテストの価値について疑問を呈しており、そこに到達するためにどのゲッターが使用されているかを心配するのではなく、特定の入力に対するコンポーネントの予想されるレンダリングをテストするようお勧めします。これにより、長期的にはリファクタリングが容易になります。私はあなたが再びそれをマウントする必要はないと思う

let myComponent = shallow(<MyComponent />) 

expect(myComponent.find(Header).exists()).to.be.true 
expect(myComponent.find(Header).props()).to.deep.equal({ title: undefined })