反応コンポーネントのレンダリング関数内で関数と変数をテストするにはどうすればよいですか？

Question

私は反応コンポーネントのテストカバレッジを改善しようとしていますが、コンポーネントのレンダリングメソッドで宣言されている変数と関数のテストで問題があります。以下は私がカバー取得できませんよ例のカップルされています。ここでは、コード

1）

cityStateZip = `${cityStateZip} - ${location.zipExtension}`; 

2）

directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`; 

3）

const onClick = (pricingTileId) => { 
    if (store.selectedPharmacy !== pricingTileId) { 
    store.setPharmacy(pricingTileId); 
    } 
}; 

です。

class Tile extends Component { 
    const { location, store } = this.props; 
    render() { 
    let directionsUrl = `https://maps.google.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`; 
    if (navigator.platform.indexOf('iPhone') !== -1 
     || navigator.platform.indexOf('iPod') !== -1 
     || navigator.platform.indexOf('iPad') !== -1) { 
     directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`; 
    } 

    let cityStateZip = `${location.city}, ${location.state} ${location.zip}`; 
    if (location.zipExtension) { 
     cityStateZip = `${cityStateZip} - ${location.zipExtension}`; 
    } 

    const onClick = (pricingTileId) => { 
     if (store.selectedLocation !== pricingTileId) { 
     store.setLocation(pricingTileId); 
     } 
    }; 

    let selectedClass; 
    if (store.selectedLocation === id) { 
     selectedClass = 'selected'; 
    } 

    return (

    ) 

私が見落としているレンダリング関数で宣言されている変数と関数をテストする有効な方法はありますか？ （私はテストのためにJestとEnzymeを使用しています）。ありがとうございました！

Answer 1

あなたはこのようなあなたのコンポーネントをリファクタリングすることができます：PART 2 ============== ...

class Tile extends Component { 

    isMobile =() => { 
    let mob = navigator.platform 

    if (mob.indexOf('Iphone')) return true 
    if (mob.indexOf('Ipad')) return true 
    if (mob.indexOf('Ipod')) return true 

    return false 
    } 

    isZipValid =() => !!this.props.location.zipExtension 
    isLocationValid = (id) => this.props.store.location === id 


    handleClick = (pricingTileId) => { 
    const { store } = this.props; 

    if (store.selectedLocation !== pricingTileId) { 
     store.setLocation(pricingTileId); 
    } 
    } 

    render() { 


    let directionsUrl 
    let selectedClass = isLocationValid() && 'selected'; 
    let cityStateZip = `${location.city}, ${location.state} ${location.zip}`; 

    if (!isMobile()) { 
     directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`; 
    } 

    if (isZipValid()) { 
     cityStateZip = `${cityStateZip} - ${location.zipExtension}`; 
    } 
    return (
     <div> Anything</div> 
    ) 
    } 

を========= =========

libまたはhelpers のような別のファイルにそれらを抽出して、コンポーネントにインポートすることができます。

ヘルパー：：

//helpers.jsコンポーネントの最後に

export const isMobile = (mob) => { 

    if (mob.indexOf('Iphone')) return true 
    if (mob.indexOf('Ipad')) return true 
    if (mob.indexOf('Ipod')) return true 

    return false 
    } 

：

export { isMobile } from './helpers' 

    if(isMobile(navigator.platform)){ 

    //you just abstracted the function 

    } 

は結論：あなたのisMobile()を簡単にテストすることができ、このよう

ヘルパーからのメッセージと任意のコンポーネントへの供給:)今

あなたは簡単に機能によって機能をテストすることができます

私はそれはあなたが助けを願って：D親切

、原則として