How do I test a simple Svelte shopping cart with Jest?

Question

I have a simple Svelte products catalog which I need to test with Jest, but I'm not sure how. The app does a fetch API call and renders some products. When clicked on the + button they are added to a cart and the total price is added to the Total value which is displayed at the bottom of the page (only the value, not the cart items themselves). I need to test if the correct data is displayed for products and the correct value is added to the product total when an item is added via the + button. I have to use Jest but other testing tools will do if needed. Here is the code:

----App.svelte----


 <script>
    import { onMount } from 'svelte';
    import Product from './Product.svelte'
    import { total } from './stores.js'

  let products = [];

  onMount(async () => {
    const res = await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline`);
    products = await res.json();
        products.forEach(function (element) {
        element.quantity = 5;
        });
    });
        
</script>

<h1>Products</h1>
    {#if products && products.length}
        <div class="photos">
        {#each products as product}
                <Product product={product} />
            {/each}
    </div>    
  {:else}
    <p>loading...</p>
  {/if}
   
<div>
    <h1>Total {$total.toFixed(2)}</h1>
</div>

<style>
    .photos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
    }

   
</style> 

---Product.svelte---


<script>
    import { total } from './stores.js';
    export let product;

    function increment(price) {
        $total = $total + price;
        product.quantity = product.quantity - 1;
    }

    function decrement(price) {
        $total = $total - price;
        product.quantity = product.quantity + 1;
    }

</script>

<figure>
    <img src={product.image_link} alt={product.name} />
    <figcaption>{product.name}</figcaption>
    <small
        >{product.price}<small />
        <h1>Quantity: {product.quantity}</h1>
        {#if product.quantity === 0}
        <button disabled>+</button>
        {:else}
        <button on:click={increment(parseFloat(product.price))}>+</button>
        {/if}

        {#if product.quantity === 5}
        <button disabled >-</button>
        {:else}
        <button on:click={decrement(parseFloat(product.price))}>-</button>
        {/if}
    </small>
</figure>

<style>
    figure,
    img {
        width: 100%;
        margin: 0;
    }
</style>

---stores.js---


import {writable} from 'svelte/store'

export const total = writable(0)

Answer 1

One approach is to keep the business logic outside the Svelte component, then you can unit test the business logic (probably a store) in isolation, without testing the whole Svelte component + backend.

For small projects, I find unit tests to be enough. But when it's something bigger, you can add integration tests too with cypress.