💡 Building a Nuxt 3 App with Pinia and Testing It with Cypress 🚀

In this article, I'll walk you through a simple project using Nuxt 3 with Pinia for state management and Cypress for end-to-end testing. This project implements an interactive counter with actions and tests to ensure everything works as expected. If you're looking to explore these technologies or enhance your skills, this article is for you!

---

🏗️ Project Structure

Here’s an overview of the main files in the project:

/layouts
  default.vue
/pages
  index.vue
/stores
  counter.ts
/tests
  main.cy.js

---

✨ Global Layout: layouts/default.vue

This layout provides the base structure for the application, including a header, a footer, and a slot for the page content.

<template>
  <header>
    <h1>Pinia</h1>
    <p>The intuitive store for Vue</p>
  </header>

  <template v-if="route.path !== '/'">
    <router-link to="/">→ Back Home</router-link>
    <hr/>
  </template>

  <slot/>
  <hr/>

  <footer>
    <a href="https://github.com/posva/pinia">
      <svg class="logo" fill="none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
        <path
            clip-rule="evenodd"
            d="M7.02751 0.333496C..."
            fill="currentColor"
            fill-rule="evenodd"
        />
      </svg>
      Github
    </a> - by
    <a href="https://github.com/posva">@posva</a> 2021
  </footer>
</template>

<script lang="ts" setup>
import { useRoute } from "#app";
const route = useRoute();
</script>

<style scoped>
.logo {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}
</style>

---

 🖼️ Home Page: pages/index.vue

The home page uses the Pinia store to display and interact with the counter.

<template>
  <div>
    <div style="margin: 1rem 0">
      <PiniaLogo/>
    </div>

    <p>
      This is an example store to test out devtools.
    </p>

    <h2>Counter Store</h2>

    <p data-testid="counter-values">Counter: {{ counter.n }}. Double: {{ counter.double }}</p>

    <p>Increment the Store:</p>
    <button @click="counter.increment()" data-testid="increment">+1</button>
    <button @click="counter.increment(10)">+10</button>
    <button @click="counter.increment(100)">+100</button>
  </div>
</template>

<script setup lang="ts">
import { useCounter } from "~/stores/counter";
import PiniaLogo from "~/components/PiniaLogo.vue";

const counter = useCounter();
</script>

<style scoped>
button {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
</style>

---

📦 Pinia Store: stores/counter.ts

The store manages the application state, along with its actions and getters.

import {acceptHMRUpdate, defineStore} from "pinia";

const delay = (t: number) => new Promise(resolve => setTimeout(resolve, t))

export const useCounter = defineStore('counter', {
    state: () => ({
        n: 2,
        incrementedTimes: 0,
        decrementedTimes: 0,
        numbers: [] as number[]
    }),

    getters: {
        double: (state) => state.n * 2
    },

    actions: {
        increment(amount: number = 1) {
            this.incrementedTimes++
            this.n += amount
        },

        changeMe() {
            console.log('Change me to test HMR')
        },

        async fail() {
            const n = this.n
            await delay(1000)
            this.numbers.push(n)
            await delay(1000)

            if (this.n !== n) {
                throw new Error('Someone changed n !')
            }
        },

        async decrementToZero(interval: number = 300) {
            if (this.n <= 0) return

            while (this.n > 0) {
                this.$patch((state) => {
                    this.n--
                    state.decrementedTimes++
                })
                await delay(interval)
            }
        }
    }
})

if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useCounter, import.meta.hot))
}

---

 🛠️ Testing with Cypress: cypress/e2e/main.cy.js

The tests verify that the counter works properly and that the Pinia store actions are correctly reflected in the UI.

const PORT = process.env.PORT || 3000;

describe("Pinia demo with counters", () => {
  beforeEach(() => {
    cy.visit(`http://localhost:${PORT}`);
  });

  it("works", () => {
    cy.get("[data-testid=counter-values]")
      .should("contain.text", "Counter: 2. Double: 4")
      .wait(500)
      .get("[data-testid=increment]")
      .click()
      .get("[data-testid=counter-values]")
      .should("contain.text", "Counter: 3. Double: 6")
      .get("[data-testid=increment]")
      .click();
  });
});

---

 🎯 Results

Running the tests with npx cypress open validates the behavior of the Pinia store and its interactions with the UI.