Writing end-to-end tests for Nuxt apps using jsdom and AVA

Writing end-to-end tests for Nuxt Apps using jsdom and AVA

Writing end-to-end tests for Nuxt Apps using jsdom and AVA

Introduction

Testing is a very important aspect of web application development. It can help reveal bugs before they appear and also instill confidence in your web application, especially during its launch. In this article, we will explore jsdom and AVA testing frameworks while writing tests for the Nuxt application.

Prerequisite

  • Working knowledge of Vue.js
  • Prior experience working with Nuxt.js
  • Node.js and npm

Introducing end-to-end test

End-to-end testing is a testing technique where the different parts of the application are often tested together hence, it is often labeled as integration tests. such tests are written to mimic a user’s movement throughout the application.

Introducing jsdom

The server side has raw HTML with no access to the DOM hence there isn’t much you can do as regards DOM manipulation. With jsdom, the DOM can be accessed inside Node.js.

According to jsdom documentation: jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js.

The latest versions of jsdom require Node.js v10 or newer. (Versions of jsdom below v16 still work with previous Node.js versions, but are unsupported.)

jsdom is pre-configured by nuxtjs and in order to use it, we need to install jsdom package then convert the HTML to DOM fragment using nuxt.renderAndGetWindow and write our test.

Introducing AVA

AVA is a test runner for Node.js with a simple test syntax. It is minimal and fast, runs tests concurrently, Enforces writing atomic tests, and has typescript support.

We will build a demo nuxt app so that we can proceed with writing its corresponding test suit. Our demo app will allow users to log in and access their dashboard.

In this tutorial, we would use create-nuxt-app to scaffold our nuxtjs project so let’s get started. Open your terminal and run this command:

If you are using yarn run this command:

Next, you will have a prompt with a list of options that configures your application for development.

Your configuration should be similar to this:

Nuxt project configuration photo

Nuxt project configuration photo

Once that is done, we’ll run the following command in our terminal:

Your app should now be running on http://localhost:3000 as follows:

Nuxt initial scaffold photo

Nuxt initial scaffold photo

In the pages directory, create a login.vue file then add the following code snippet to it:

Here, we create a basic form with its input field values binds to the template through the v-model attribute. Also, we create a login method which redirects users to the dashboard if all the input values are provided otherwise, an error message is logged to the console.

In the pages directory, create a dashboard.vue file then add the following code snippet to it:

The snippet above dynamically renders the content on the template. the asyncData hook ensures that Nuxt renders message in the template before navigating to the next page or display the error page).

Update pages/index.vue with the following code snippet:

Setting up the test environment

We will use the following steps to setup our test environment:

step1

Run the command below to install ava and jsdom as dev dependencies:

step2

Update package.json file with the following AVA configuration:

step3

Create a setup.js file in the root directory, then add the following code:

step 4

Since we will likely use the es6 features in our test, we need to install the Babel package in the app:

Building the test suite

Now, we are done with the configurations and we are ready to write our test. We will test our Nuxt app with the following user flow:

  • User access the home page
  • User access the login page
  • User enters his login details
  • User is taken to his dashboard

In the tests directory, create tests.js and add the following test suite:

The above code snippet initializes nuxt with the required configurations for our tests, setup a test server, and starts listening on localhost:5000.

User access the home page

Add the code snippet to test/tests.js below the previous code snippet.

The test suit above checks for the existence of the home route and also check if its content is properly rendered.

N/B: The test.serial method ensures that the test cases execute orderly from top to bottom.

User access the login page

Add the code snippet to test/tests.js below the previous code snippet.

The test suit above checks for the existence of the /login route and also check if its content is properly rendered. The test suit above performs DOM manipulation on the server-side with jsdom.

Confirm the default values of the input fields

Add the code snippet to test/tests.js below the previous code snippet.

The test suit above checks for the existence of the /login route and also check if its default values are set properly.

A user enters his login details

Add the code snippet to test/tests.js below the previous code snippet.

The test suit above checks for the existence of the /login route and also ensures the user has provided values for the input fields then clicks the login button.

User is taken to his dashboard

Add the code snippet to test/tests.js below the previous code snippet.

The test suit above checks for the existence of the /dashboard route and also ensure that its content is properly rendered.

Running the test suite

Open your terminal and run the test suite with the following command:

If all your test suite passes, you should get the following result:

Successful test suite photo

Successful test suite photo

Conclusion

Finally, we have an idea of what an end-to-end test is and how to write end-to-end tests for Nuxt apps using jsdom and AVA. I hope you have learned a great deal from this tutorial. Do reach out in the comment section below if you have any questions or suggestions. Here is the Github repo for the demo Nuxt application.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

26.02.2024

Server-Side Rendering with Vue.js and Nuxt.js

Vue.js and Nuxt.js seamlessly complement each other for SSR. Vue.js provides the core functionality for dynamic UIs, while Nuxt.js enables ...

An Introduction to Pinia: The Alternative State Management Library for Vue.js Applications

The maintenance of the application’s data and ensuring that other components can access and modify the data as necessary depending on state ...

16.12.2020

Real-Time Subscriptions with Vue and GraphQL

In this tutorial, we will move from setting up and deploying graphql backend with Hasura cloud to consuming the subscription endpoint on the vue.js ...

4 comments

krishna teja February 11, 2021 at 4:20 pm
1

this page very useful for all java programmer. and it`s page give almost many information about java.

Richard January 28, 2022 at 12:43 am
0

Thank you, very helpful!

Kathy March 4, 2022 at 4:01 pm
0

Yeah, this is very helpful

Eric January 30, 2022 at 3:12 am
0

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy