React/enzyme：サブコンポーネントのテスト方法は？

Question

これは私のメッセンジャーのように見えます。ご覧のとおり、メインコンポーネントとリストコンポーネントがあります。メインコンポーネントはデフォルトとしてエクスポートされます。 これは私のアプリケーションではすべて期待どおりに動作しています。

/imports/ui/components/messenger.jsx

import React, { Component } from 'react' 
import PropTypes from 'prop-types' 
import { Container, Segment, Loader, Header } from 'semantic-ui-react' 

class Messenger extends Component { 
    static get propTypes() { 
    return { 
     data: PropTypes.array, 
     articleId: PropTypes.string, 
     isLoading: PropTypes.bool 
    } 
    } 

    render() { 
    const { data, articleId, isLoading } = this.props 

    if (isLoading) { return (<Loader active inverted size='massive' className='animated fadeIn' />) } 
    if (articleId) { return (<MessengerList data={data} articleId={articleId} />) } 

    return (
     <Container> 
     <Segment id='' className='m-b-1'> 
      <Header as='h1'>Title</Header> 
      <MessengerList data={data} /> 
     </Segment> 
     </Container> 
    ) 
    } 
} 

class MessengerList extends Component { 
    /* ... */ 
} 

export default Messenger 

今私は、酵素を用いて主成分のためにいくつかのユニットテストを行うにしたいと思います。これは私がやっている方法ですが、MessengerListが定義されていないため、最後のテストに失敗しています。それで、どうすればいいのですか？私はテストで

export class MessengerList extends Component { 
    /* ... */ 
} 

そして.... export default Messenger

Answer 1

エクスポートあなたMessengerListクラスを変更したくない

import React from 'react' 
import { expect } from 'meteor/practicalmeteor:chai' 
import { shallow } from 'enzyme' 

import { Container, Loader } from 'semantic-ui-react' 
import Messenger from '/imports/ui/components/messenger.jsx' 

describe('<Messenger />',() => { 
    const defaultProps = { 
    data: [], 
    articleId: '', 
    isLoading: true 
    } 

    it('should show <Loader /> while loading data',() => { 
    const wrapper = shallow(<Messenger {...defaultProps} />); 
    expect(wrapper.exists()).to.be.true 
    expect(wrapper.find(Loader).length).to.equal(1) 
    }) 
    it('should show <Container /> data has been loaded',() => { 
    defaultProps.isLoading = false 
    const wrapper = shallow(<Messenger {...defaultProps} />); 
    expect(wrapper.find(Container).length).to.equal(1) 
    expect(wrapper.find(Loader).exists()).to.be.false 
    }) 
    it('should show <MessengerList /> if articleID is given',() => { 
    defaultProps.articleID = 'dummy' 
    defaultProps.isLoading = false 
    const wrapper = shallow(<Messenger {...defaultProps} />); 
    expect(wrapper.find(MessengerList).length).to.equal(1) 
    expect(wrapper.find(Loader).exists()).to.be.false 
    }) 
}) 

ん....

import React from 'react' 
import { expect } from 'meteor/practicalmeteor:chai' 
import { shallow } from 'enzyme' 

import { Container, Loader } from 'semantic-ui-react' 
import Messenger, { MessengerList } from '/imports/ui/components/messenger.jsx'; 

describe('<Messenger />',() => { 
    let wrapper; 
    const defaultProps = { 
    data: [], 
    articleId: '', 
    isLoading: true 
    } 

    beforeEach(() => { 
    // render the component once up here in this block. It runs before each test. 
    wrapper = shallow(<Messenger {...defaultProps} />); 
    }); 

    it('should show <Loader /> while loading data',() => { 
    expect(wrapper.exists()).to.be.true 
    expect(wrapper.find(Loader).length).to.equal(1) 
    }); 

    it('should show <Container /> data has been loaded',() => { 
    defaultProps.isLoading = false 

    expect(wrapper.find(Container).length).to.equal(1) 
    expect(wrapper.find(Loader).exists()).to.be.false 
    }); 

    it('should show <MessengerList /> if articleID is given',() => { 
    defaultProps.articleID = 'dummy' 
    defaultProps.isLoading = false 

    expect(wrapper.find(MessengerList).length).to.equal(1); 
    expect(wrapper.find(Loader).exists()).to.be.false 
    }); 
}); 

更新

理想的には、あなたはあなたがテストに `MessengerList`コンポーネントをインポートする必要が...小道具が最初に修正されていることを

... 
describe('and the data has loaded',() => { 
    beforeEach(() => { 
    defaultProps.isLoading = false; 
    }); 

    it('should show <Container /> component',() => { 
    expect(wrapper.find(Container).length).to.equal(1) 
    expect(wrapper.find(Loader).exists()).to.be.false 
    }); 
}); 
...