測試終極版連接組件

我在陣營 - 終極版測試終極版連接組件

export class IncrementalSearch extends React.Component { 

constructor(props) { 
    super(props); 
    this.onSearch$ = new Subject(); 
    this.onChange = this.onChange.bind(this); 
} 

componentDidMount() { 
    this.subscription = this.onSearch$ 
     .debounceTime(300) 
     .subscribe(debounced => { 
      this.props.onPerformIncrementalSearch(debounced); 
     }); 
} 


componentWillUnmount() { 
    if (this.subscription) { 
     this.subscription.unsubscribe(); 
    } 
} 

onChange(e) { 
    const newText = e.target.value; 
    this.onSearch$.next(newText); 
} 

render() { 
    return (
     <div className={styles.srchBoxContaner}> 
      <input 
       className={styles.incSrchTextBox} 
       type="text" name="search" id="searchInput" placeholder="Search.." 
       onChange={this.onChange} 
      /> 
     </div> 
    ); 
}

下面連接的組件}

const mapDispatchToProps = (dispatch) => ({ 
    onPerformIncrementalSearch: (searchText) => { 
     dispatch(performIncrementalStoreSearch(searchText)); 
    } 
}); 

const IncrementalSearchComponent = connect(null, mapDispatchToProps)(IncrementalSearch); 
export default IncrementalSearchComponent;

現在我試圖寫的連接部件的單元測試。我使用Jest，Enzyme和Sinon。到目前爲止，這是我的單元測試看起來像

it('calls \'onPerformIncrementalSearch\' when the user types in something',() => { 
    const mockStore = configureStore(); 

    const onPerformIncrementalSearchSpy = sinon.spy(); 
    const mapStateToProps = null; 
    const mapDispatchToProps = { 
     onPerformIncrementalSearch: onPerformIncrementalSearchSpy 
    }; 

    const mappedProps = { mapStateToProps, mapDispatchToProps }; 

    const incrementalSearchWrapper = 
     mount(
      <Provider store={mockStore}> 
       <IncrementalSearchComponent 
        onPerformIncrementalSearch={onPerformIncrementalSearchSpy} 
        props={mappedProps} 
        store={mockStore} 
       /> 
      </Provider> 
     ); 


    //find the input element 
    const searchInput = incrementalSearchWrapper.find('#searchInput'); 
    searchInput.node.value = 'David'; 
    searchInput.simulate('change', searchInput); 
    expect(onPerformIncrementalSearchSpy.called).toEqual(true); 
    // onChangeSpy.restore(); 
});

然而，當我運行這個測試，我得到以下錯誤

類型錯誤：無法讀取的不確定

財產「綁定」我該如何解決這個？

來源

2017-08-10 tmp dev

測試連接組件可能是一個巨大的痛苦。我發現它比嘗試用Provider包裝你的組件來讓他們進入商店更加麻煩。

相反，我只是導出組件mapStateToProps和mapDispatchToProps並單獨測試它們。如果您將連接的組件導出爲默認值，您的應用程序仍然可以工作。

丹·阿布拉莫夫（共終極版的作者）建議在this comment

這種方法我也建議尋找到enzyme shallow rendering，而不是測試連接部件在使用mount。

來源

2017-08-10 22:18:53 bill

但是，連接的組件不僅僅是mapStateTrops和mapDispatchToProps，組件中還有其他邏輯需要測試。那麼我該如何測試呢？ –

您仍然可以通過這種方法測試組件中的邏輯。你只需要兩個「出口」。一種方法是導出連接組件'export default connect ...'，然後通過'import {default as myComponent}'將其導入到應用程序中。您還可以導出未連接的組件，如'export class myComponent'，並在您的測試中導入，例如'import {myComponent}'。然後，您可以測試組件中的所有邏輯，而無需擔心訪問存儲和測試連接的組件。 – bill

[此答案]（https://stackoverflow.com/a/35578985/6326906）可能有助於進一步解釋。 – bill

測試終極版連接組件

回答

相關問題