Как можете да тествате функции и променливи в рамките на функцията за изобразяване на компонента React?

Опитвам се да подобря тестовото си покритие за моите react компоненти, но имам проблеми с тестването на променливи и функции, декларирани в метода за изобразяване на моите компоненти. По-долу има няколко примера, които не мога да покрия:

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 за моето тестване). Благодаря ти!


reactjs javascript testing jestjs enzyme
person TigerBalm    schedule 20.06.2017    source източник
comment
като общо правило е трудно да се тества логиката в рамките на голяма функция, която прави много неща. Ето защо се препоръчва да се напишат няколко по-малки метода, които функцията за изобразяване може след това да използва; оставете getCityStateZip() да управлява логиката на zip разширението и getDirectionsUrl() да управлява специфичната за устройството логика   -  person Hamms    schedule 20.06.2017

Отговори (1)


arrow_upward
3
arrow_downward

Можете да преработите вашия компонент по следния начин:

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

..

============== ЧАСТ 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

любезно,

person Edivan Silva    schedule 20.06.2017
comment
Има смисъл, благодаря! Това може да е глупав въпрос, но съм много нов в тестване от такова естество. Как да получа достъп до тези методи в моя тест? Функцията isMobile например. Импортирам и конзолирам моя компонент Tile, но изглежда не мога да намеря тези методи никъде. Не съм съвсем сигурен как да ги тествам. Благодаря много за съдействието :) - person TigerBalm; 21.06.2017
comment
проверете втора част на моя пост по-горе - person Edivan Silva; 21.06.2017