如何測試反應組件渲染函數中的函數和變量？

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

你可以重構你的組件是這樣的：

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

..

============== PART 2 ========= =========

您可以將它們提取到單獨的文件，如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

請，