Как вы можете тестировать функции и переменные в функции рендеринга вашего реагирующего компонента?

Я пытаюсь улучшить тестовое покрытие для моих компонентов реакции, но у меня возникают проблемы с тестированием переменных и функций, объявленных в методе рендеринга моих компонентов. Ниже приведены несколько примеров, которые я не могу охватить:

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