Forem: Hannah Ejimofor

Installing Jest for Testing in Your Vite-React TypeScript Project. A Step-by-Step Guide.

Hannah Ejimofor — Sat, 08 Jul 2023 13:13:56 +0000

Introduction

Application testing is an important aspect of web development. It helps eliminate bugs before these applications are pushed out to the users. Testing applications also helps in maintaining and refactoring code, especially in collaborative projects where a developer makes a change that is out of context thereby promoting good collaboration among teammates. It also ensures the code quality and correctness.
The aim of the article is to show how unit testing is done in a react-vite app with Jest. From the setup, down to the implementation.

Jest

To know more about Jest as a testing framework, visit jest website

Prerequisite

To get started, we will need the following:

PC and a text editor. (Just kidding, of course, we already have that)
npm or yarn installed

We will start by creating a react app with Vite then we proceed to set up Jest for the testing and try out some tests on the react components.

Use Case

Step 1: Creating the react app with Vite

Open the terminal in your text editor (For the project, we will be making use of the VSCode) and proceed to create the react app using the command below:
npm create vite@latest
Follow the wizard and select the desired options

From the above, you'd see we have selected React and Typescript, and we called the project "mini-app-testing" so we will be building with Typescript.

Now run the following commands to get started and install the needed packages, step by step.

cd mini-app-testing - to navigate to the project directory.

npm install - to install the packages. (You can also use yarn but we started with npm so we stick with it).

npm run dev - to start the project.

If you have done the above correctly, you should have something like this
On your VSCode

On your browser

Step 2: Setting up Jest

Before we dive into the process, note that Vite has certain limitations with Jest which makes setting up Jest in a Vite application to seem a bit complicated.
Follow the process below to get started

npm install jest --save-dev
npm install @testing-library/react --save-dev
npm install ts-jest @types/jest --save-dev
In the package.json, add "test": jest to the script



// package.json

{
  "name": "mini-app-testing",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "test": "jest"
  },

run npm run test and you receive a message saying no test found as seen below.

So to fix the above, In the src folder, we create a folder called __ tests __ and add the test file: src/__ tests __/App.spec.tsx.

Add a simple test in the test file: App.test.tsx


 typescript
// src/__ tests __/App.test.tsx

test('demo', () => {
  expect(true).toBe(true)
})

Run the npm run test again. Voila!!! our first test passed

Step 3: Testing the components

To test the components, we import the App.tsx into the App.test.tsx and run a simple truthy test on the App component.



// src/__ tests __/App.test.tsx

import { render } from "@testing-library/react"
import App from "../App"

test('demo', () => {
    expect(true).toBe(true)
})

test("Renders the main page", () => {
    render(<App />)
    expect(true).toBeTruthy()
})

Let test again, run npm run test. But it will fail due to missing dependencies and configurations as seen below. So it has to be configured to be able to import and read imported components.

Run npm install ts-node @testing-library/jest-dom --save-dev
Run npm install jest-environment-jsdom
Run npm install identity-obj-proxy --save-dev
In your root directory, create a jest.config.ts file and add the following to it



// jest.config.ts

export default {
    preset: 'ts-jest',
    testEnvironment: 'jest-environment-jsdom',
    transform: {
        "^.+\\.tsx?$": "ts-jest" 
    // process `*.tsx` files with `ts-jest`
    },
    moduleNameMapper: {
        '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__ mocks __/fileMock.js',
    },
}

In the src folder, create a test folder, then create a __ mocks __ folder in the test folder and add a fileMock.js file: src/test/__ mocks __/fileMock.js and add the following content:



// src/test/__ mocks __/fileMock.js

module.exports = {
    __esModule: true,
    default: 'test-file-stub',
};

In the App.test.tsx, import @testing-library/jest-dom



// src/__ tests __/App.test.tsx

import '@testing-library/jest-dom'
import { render } from "@testing-library/react"
import App from "../App"

test('demo', () => {
    expect(true).toBe(true)
})

test("Renders the main page", () => {
    render(<App />)
    expect(true).toBeTruthy()
})

Then run the npm run test to check if all issues have been resolved.

You can go ahead with your testing process. Happy testing!!!😀

Conclusion

In summary, incorporating Jest and installing the essential Jest packages in a React Vite application is a simple and uncomplicated process. By following a series of straightforward steps, developers can seamlessly integrate Jest into their projects and harness its robust testing features. With Jest successfully implemented, they can confidently create tests to guarantee the quality and accuracy of their React Vite applications.

Managing state with Pinia and Nuxt 3 - Using a simple add to cart instance

Hannah Ejimofor — Tue, 13 Jun 2023 12:51:57 +0000

Introduction

One of the crucial aspects of frontend development is state management.

State management allows developers to maintain and manage the state of their applications. State here refers to the information that your web application needs to recall to keep the system working smoothly.

Some reasons why state management is important in web development:

Improving the performance of a web application by reducing the number of unnecessary re-renders and improves the speed and efficiency of the application.
Ensuring the consistency of data across different components of the application hereby preventing errors and improving the user experience.
Ensuring that the application remains scalable and maintainable over time and also making it easier to debug an application by providing a clear picture of the state of the application at any given time.

In this article, we will be focusing on Pinia as a state management library and how it is used in Nuxt applications.

Pinia and Nuxt 3

PINIA ~ The State Manager

Pinia is a state management library for Vue.js applications that provides a centralized store for easy access to data from any component/page in the application using a more reactive approach.

Starting up your Nuxt 3 project

On the terminal, paste the code below to install Nuxt 3 and start up your project:

npx nuxi init <project-name>

The following prompts will pop up in order to proceed. Follow the instructions.

cd into the folder using cd <project-name>
Finally, you can install the dependencies using either yarn install or npm install. But for this tutorial, we will be working with yarn.
And Voila!!!, Your Nuxt 3 Project is ready

Setting up Pinia

Install Pinia to your Nuxt app using: yarn add @pinia/nuxt or npm install @pinia/nuxt
In your project folder, navigate to your nuxt.config.ts file and add Pinia to your modules in this format;

// nuxt.config.ts

modules: ["@pinia/nuxt"],

Navigate to the store folder and create a file which for the sake of this tutorial, will be named, cart.js.

Use Case

Objective:

A simple application that imitates an ecommerce platform for shopping. We want to be able to add to cart and modify our cart from the store using pinia as the state manager.

Creating the Cart State

Firstly, we have to import the already installed pinia packages to be able to use its storage. Navigate to the cart.js file.

The "defineStore" function takes two arguments: the name of the store and an object containing the store's state and actions. In this case, the name of the store is "cart". The object contains a "state" property, which is a function that returns an object containing the initial state of the store. In this case, the initial state is an empty array assigned to a property named "cart".

Next we export the cart store as a constant in a way that is easy to understand, it is advisable to use a name that is related to the store. In this example, we can use the name "useCartStore" to export the cart store. The name "cart" represents the file name, which is "cart.js". By exporting the cart store as a constant, we can easily access it in other parts of our code and perform actions on the cart state.

// cart.js


import { defineStore } from "pinia";

export const useCartStore = defineStore('cart', {
  state: () => {
    return {
      cart: [],
    };
  },
})

In the code above, We want to store our cart and also be able to modify it. So create a cart state and make it an empty array.

Adding to Cart

Setting up the Nuxt Component/Page Structure: Create a component called products.vue

// src/components/Products.vue


<template>
  <div>
    <div v-for="(course, index) in courses" :key="index">
       <span>{{ item.title }} - {{ item.price }}</span>
       <button>Add to cart</button>    
    </div>
  </div>
</template>


<script setup>
const courses = ref([
  {
    id: "itm1",
    price: "65.00",
    quantity: 0,
    title: "Animation",
  },
  {
    id: "itm2",
    price: "52.00",
    quantity: 0,
    title: "Design",
  },
  {
    id: "itm3",
    price: "76.00",
    quantity: 0,
    title: "Photography",
  },
  {
    id: "itm4",
    price: "84.00",
    quantity: 0,
    title: "Crypto",
  },
]);
</script>

Click to add To Cart:

To enhance the functionality of the web application, you need to add a function to the "Add to Cart" button on the "Products.vue" file. This function should accept the item that the user intends to add to the cart as a parameter. You should already be familiar with the "v-for" directive, which is used to loop through items and display them in the HTML template. If you are not familiar with this directive, please refer to the appropriate documentation or tutorial.

The @click event on the button is set to a function that is called whenever the button is clicked. This function calls the addToCart method and passes in the item object as a parameter. The addToCart method is responsible for adding the item to the shopping cart.The button's text changes depending on whether the item is already in the shopping cart. This is determined by the alreadyInCart method, which returns true if the item is already in the cart, and false if it is not.

// src/components/products.vue


<template>
  <div>
    <div v-for="(course, index) in courses" :key="index">
          <span>{{ item.title }} - {{ item.price }}</span>
          <button
            @click="() => {addToCart(item)}"
            >{{ alreadyInCart(item) ? 'In Cart' : 'Add to cart' }}</button
          >
    </div>
  </div>
</template>

Now, we navigate to the cart.js file and create an action called addToCart() This action takes an item as a parameter and adds a new object to the "cart" array. This object is created by copying the original "item" using the spread syntax (...) and adding a "quantity" property with a value of 1. This will keep track of the quantity of the item in the cart.

 // store/cart.js


import { defineStore } from "pinia";


export const useCartStore = defineStore('cart', {
 state: () => {
    return {
      cart: [],
    };
  },


  actions: {
    addToCart(item) {
      this.cart.push({ ...item, quantity: 1 })
    },
  },
})

In the below code, we access the store action from the product.vue component in order to actually pass a new product to the store and add it to cart state.The useCartStore function returns a reactive instance of the cart store defined in the "cart.js" file. The instance is assigned to a variable called "cartStore".Two functions are defined within the script setup block.The first function, "alreadyInCart", accepts an item as a parameter and checks if the item is already in the cart by using the "find" method on the "cartStore.cart" array. The second function, "addToCart", accepts an item as a parameter and checks if the item is already in the cart. If the item is not already in the cart, it is added by calling the "addToCart" action on the "cartStore". If the item is already in the cart, an alert is displayed.

 // src/components/products.vue

<script setup>
import { useCartStore } from "~~/store/cart";

const cartStore = useCartStore();

const alreadyInCart = (item) => {
  const x = cartStore.cart?.find(el => el.id === item.id)
  if(x?.id) {
    return true
  } else {
    return false
  }
}

const addToCart = (item) => {
  if(!alreadyInCart(item)) {
    cartStore.addToCart(item);
  } else {
    alert(`${item.title} already in cart`)
  }
};
</script>

Conclusion

Managing state with Pinia is an effective way to handle the state of a Vue.js application. With Pinia and Nuxt 3, developers can create dynamic and interactive features such as a shopping cart. The example provided shows how easy it is to use Pinia to manage state and how it can be used to build a simple add-to-cart feature. Overall, Pinia and Nuxt 3 make a powerful combination for building scalable and maintainable Vue.js applications.