mardi 20 juin 2017

How can you test functions and variables within your react component's render function?

I'm trying to improve my test coverage for my react components, but I am having trouble testing variables and functions declared within the render method of my components. Below are a couple of examples that I'm unable to get covered:

1)

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

2)

directionsUrl = `http://ift.tt/2tpXZRy}`;

3)

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

Here's the code:

class Tile extends Component {
  const { location, store } = this.props;
  render() {
    let directionsUrl = `http://ift.tt/2sQk9zu}`;
    if (navigator.platform.indexOf('iPhone') !== -1
      || navigator.platform.indexOf('iPod') !== -1
      || navigator.platform.indexOf('iPad') !== -1) {
      directionsUrl = `http://ift.tt/2tpXZRy}`;
    }

    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 (

    )

Is there an effective way to test the variables and functions declared in the render function that I'm overlooking? (I'm using Jest and Enzyme for my testing). Thank you!

Aucun commentaire:

Enregistrer un commentaire