Writing End-to-end Tests for Nuxt Apps using JSDOM and AVA

We will explore jsdom and AVA testing frameworks while writing tests for the Nuxt application. jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js. AVA is a test runner for Node.js with a simple test syntax. We would use create-nuxt-app to scaffold our nuxtjs project

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.

javascript nuxt testing react node

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

In this video I'll show you how to test react hooks using react-hooks-testing-library

Testing is complicated. I’ve certainly never been good at it. For the longest time, I’ve only been focused on basic function input-output unit tests. Why? Because they were easy — you didn’t need to render HTML, you didn’t need to query DOM elements, you didn’t need to interact with said DOM elements. But of course, React component testing is a necessity for any mature codebase. And it finally came time for me to sit down and figure it out. A window into React component testing. Interaction Testing with React Testing Library

When you want to test some of your React components using Jest unit testing, there are a few extra steps that should be taken to ensure proper testing is completed. I would suggest reading part one to the series here before continuing on so that you get the basic knowledge and learn how to set things up before moving forward with this article.

Test Driven Development (TDD) with React Test Renderer: Find out how to use React Test Renderer to test React components