Component Testing in Nuxt.js

Component Testing in Nuxt.js

In this Nuxt.js tutorial, we're going to set up a game store application with Nuxt.js and test its components.

Recently, Vue has had an increase in popularity which has fueled an interest in Nuxt.js – a framework used to build robust and universal applications with Vue. While building robust applications, it’s important to provide a clear path towards testing as this will reduce the time spent debugging and code refactoring. In this article, we’re going to take a look at how we can set up a game store application with Nuxt.js and test its components. The main prerequisite in understanding this post is the basic knowledge of Vue and Nuxt.js.

Setting up a Nuxt.js application

Our first step to creating an application with Nuxt.js would be to install it in the folder of our project. In the terminal, let’s navigate to our project folder and input the following command:

npm install nuxt

Still using the terminal, in our project folder – we’ll create our application via npx(which is shipped by default since npm 5.2.0):

npx create-nuxt-app game-store

This will take us through a list of options – here your options may differ, below is a guide detailing what was selected in creating the application we’ll be working with:

? Project name: game-store
? Programming language: JavaScript
? Package manager: NPM
? UI Framework: None
? Nuxt.js modules: None
? Linting tools: None
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static
? Development tools: jsconfig.json
? Version Control System: Git

Once we’re done creating the application, we can navigate to it via our terminal and launch it in the browser:

cd game-stores
npm run dev

Once this is done, our window should appear:

game store window

We should also have a project folder structure similar to this:

project folder structure

Configuring our store

To manage state efficiently, Nuxt can leverage the abilities of Vuex. This enables every file created in the /store directory to be treated as a Vuex module (i.e it contains its own state, mutation, action, and getters). We’ll use our store directory as a starting point for our application. Let’s begin by including the data we need – here’s a sample:

// store/games.js

const games = [
  {
    title: "Killzone: Shadow Fall",
    console: "PlayStation 4",
    rating: 8.5
  },
  {
    title: "Star Wars Battlefront 2",
    console: "PlayStation 4",
    rating: 8
  },
  {
    title: "Metro: Exodus",
    console: "PlayStation 5",
    rating: 9
  },
  {
    title: "BioShock: The Collection",
    console: "PlayStation 4",
    rating: 7.5
  }
  {
    title: "Battlefield V",
    console: "PlayStation 5",
    rating: 8
  }
];

Next, we’ll configure the state, mutation, action, and getters of this file – we want our store to display only PlayStation 4 titles:

// store/games.js

const state = () => {
    return games;
  };

  const mutations = {
  };

  const actions = {};

  const getters = {
    byConsole (state) {
      return (consoleName) => {
        return state.filter(({ console }) => {
          return console.toLowerCase() === consoleName.toLowerCase()
        });
      }
    },
    playstationfour(state) {
      return state.filter(({ console }) => {
        return console === 'PlayStation 4'
      });
    }
  };

  export default { state, mutations, actions, getters };

Next, we’ll map the state of our store to the browser. This will be done by replacing the default view we have in pages/index.vue:

<!-- pages/index.vue -->
<template>
  <section>
    <h2 class="title">PlayStation 4 Bestsellers</h2>
    <ul class="games">
      <li v-for="game in psfourGames" :key="game.title">
        {{game.title}}
      </li>
    </ul>
  </section>
</template>

Then we’ll use Vuex’s MapGetter helper to map the previously defined getter in games.js to a computed property in our index.vue file:

<!-- pages/index.vue -->
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      byConsole: 'games/byConsole'
    }),
    psfourGames () {
      return this.byConsole('PlayStation 4')
    }
  }
}
</script>

Let’s take a look at how this appears in the browser. Navigate to your terminal and run npm run dev – your browser view should be similar to this:

play station 4 best sellers list

nuxt vue javascript testing developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Testing Vue Applications With The Vue Testing Library

We will look at testing Vue applications using the Vue Testing Library — a lightweight library that emphasizes testing your front-end application from the user’s perspective. The Vue Testing library can help you to test your applications by mirroring the way that a user would interact with them. Here’s everything you need to know if you want to get started right away.

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Getting Started Testing Vue Components in Node.js with Vue Test Utils

Vue Test Utils is Vue's official unit testing library for Node.js. Here's how you can get started testing Vue components in Node with Vue Test Utils.

How To Do Unit Testing in Vue.js

Unit Testing in Vue.js - Watch live as Gwen Faraday demonstrates how to do unit testing in Vue.js.

How to Test Vue Components using Vue Testing Library

Learn how to test Vue components using Vue Testing Library. Testing is crucial in the development of any application. Vue Testing Library a member of the Testing Library family, which includes React Testing Library, DOM Testing Library, and more. It builds upon Vue Test Utils, the official testing library for Vue, and DOM Testing Library, which enables it to use features from the Testing Library family.