jeudi 14 décembre 2017

Testing React Components

ive written hundreds of react components but foolishly I always put off testing. i guess i see it as necessary evil but i would like to start loving it. I have this react componenent:

class Basket extends React.Component {
  render() {
    return (
      <BasketContainer>
        <BasketProducts>
          <h1>Basket</h1>
          {this.props.basket.items.map((item) => (
            <BasketProduct>
              <BasketProductImage>
                <Image image={item.product.image} />
              </BasketProductImage>
              <PriceAndRemove>
                <BasketProductPrice>
                  <span className="price">£{item.quantity * item.product.price}</span>
                </BasketProductPrice>
                <BasketProductRemove>
                  <button onClick={() => this.props.removeFromBasket(item.product)}>X</button>
                </BasketProductRemove>
              </PriceAndRemove>
              <BasketProductName>
                <p className="name">{item.product.name}</p>
              </BasketProductName>
              <BasketProductQuantity>
                <span className="quantity">Qty {item.quantity}</span>
                <span><button onClick={() => this.props.increaseQuantity(item)} className="quantity">+</button></span>
                <span><button onClick={() => this.props.decreaseQuantity(item)} className="quantity">-</button></span>
              </BasketProductQuantity>
            </BasketProduct>), this)}
          <button onClick={() => this.props.clearBasket()}>Clear Basket</button>
        </BasketProducts>
        <Total>
          <h1> Total </h1>
          <span className="label">Sub-total </span>
          <span className="amount">£{this.props.basket.total}</span>
          <button>Checkout</button>
        </Total>
      </BasketContainer>
    );
  }
}

written using styled components, can anyone give me some guidelines on where I can start testing ?

i.e. what is a good test/what isn't? do I test button clicks? etc etc

im planning on using enzyme but i just want some idea and basically what are things necessary to test and what is OTT testing and unneeded, thanks

Aucun commentaire:

Enregistrer un commentaire