DEV Community: Chidera Ani

How to Write a Simple Test for Your Next.js App

Chidera Ani — Sun, 12 Jun 2022 16:55:01 +0000

A guide to writing a simple test for a Next.js app.

First things first

It’s important for software developers to write tests for their software, especially in production to correctly determine whether or not it works effectively and as intended. We don’t want to assume it works only for it to fail later.

Well, it might “work” but you still need to write tests :)

In this tutorial, I’ll be taking you through writing a simple set of tests for a form in your Next.js application using the Jest and React Testing Library. Let’s take a brief look at these tools mentioned above and set our project up.

Next.js

Next.js is an open-source JavaScript framework built by Vercel which provides React-based web applications functionalities. It enables functionalities such as server-side rendering, serverless functions, static applications, etc.

We’ll set up our project by creating a new Next.js app.

Open your terminal and navigate to where you’d keep repos and type the command below.

$ npx create next-app@latest

This will take you through some installation prompts after which it’ll create a basic Next.js app in our folder. If you’d prefer a TypeScript setup add a TypeScript flag as displayed below:

npx create-next-app@latest --typescript

Now that we’ve set up our Next.js app let’s add the testing tools to our app.

Jest

Jest is a Javascript testing framework built by Christoph Nakazawa and currently being maintained by Facebook. One of Jest’s main advantages is simplicity. It’s relatively easy to set up especially for first-time users.

Let’s install our Jest dependencies using npm:

$ npm install -D jest babel-jest

This will install Jest and also Babel Jest which ensure Jest works properly with Next.js.

Next up we’ll create a .babelrc file and add the configuration displayed below. This will help with configuring Babel Jest we already installed.

{  
 "presets": ["next/babel"] 
}

This ensures Jest works in our app as expected.

While Jest enables us easily test javascript apps and code it cannot directly test our Next.js app because it does not have the functionality to render React-based components. We’ll therefore need a tool that can work with Jest to render our Next.js app and then run tests on it.

That’s where React Testing Library comes in.

React Testing Library

React Testing Library is an open-source tool that helps test your React.js app by rendering it and exposing the DOM to be queried. This helps you test your React.js app in its intention to be used rather than just the implementation details.

Let’s install the dependencies to our app.

$ npm install -D @testing-library/jest-dom @testing-library/react

This will install the React Testing Library and a @testing-library/jest-dom package that’ll work with Jest in testing our app.

Before we start writing our tests let’s make some changes to the package.json file in our project directory.

The first change is in the scripts field which tells npm how to run tests on our app.

“test”: “jest — watch”

This tells npm to run jest in watch mode (monitor our changes and run tests accordingly) when we run the npm test a command. Our scripts field should now look as displayed below.

“scripts”: {
 “dev”: “next dev”,
 “build”: “next build”,
 “start”: “next start”,
 “test”: “jest — watch”
},

Secondly, we’ll add a new field to our package.json called jest .

"jest": {
 "testEnvironment": "jsdom"
}

This tells Node to use jsdom as our test environment. The default Node testEnvironment won’t enable us to test using a browser environment.

Having set up these tools we can now proceed to code and write our tests.

We’ll start by creating a basic sign-up form and then we’ll write tests for it.

Sign up form

We’ll navigate to our index.js file, delete all its content, and import useState.

import { useState } from 'react';

Next up, we create a RegisterPage component and in it, we’ll create a basic form which we’ll be testing.

In this RegisterPage component we declare an isLoading state value and set it to false. This value will indicate whether our being submitted (isLoading) or not.

We then proceed to create a registerUser function which we’ll use to simulate a form submission, it’ll prevent the default form submission, set isLoading to true and set it back to false after 5 seconds or 5000 milliseconds.

Next up we create formInputs, an array of objects, containing form inputs which we’ll render in our return block.

Moving on, in our component, we’ll create a form, map through our formInputs array, and add a button that calls registerUser when it’s clicked. We can now export our components.

Styles

Let’s add some basic styling to our styles/globals.css. If you do not have the file create one and import it to your _app.js file.

We’ll now save these files and run our Next app using npm run dev . When we open our browsers to http://localhost:3000 we should see our app now up and running.

Now it’s time to write tests for the form in our app.

Testing the app

Let’s start by creating a tests folder, in it, we’ll create a subfolder called pages . This is where we’ll be keeping test files for our pages (Create your first test file and name it index.test.js).

First, we’ll make some imports to our test file.

import '@testing-library/jest-dom';

import { render, screen, fireEvent } from '@testing-library/react';

We import @testing-library/jest-dom which was earlier installed, we also import render, screen and fireEvent from @testing-library/react more on their usage in this tutorial.

Next up we import the Index file we’ll be testing.

import Index from '../../pages/index';

Before we write our tests let us create an array formInputValues that will contain mock data we’ll use in testing our form.

Now, the tests.

We’ll start by describing what our tests are for. We’ll start by creating a describe block of code. Describe is a Jest method used to group related testing blocks together. It takes two arguments: a string for describing the test suite and a callback function for wrapping the test or tests you’ll be writing.

describe(‘Simple working form’, () => {

});

Next up we’ll be writing our test cases in it blocks. it is a Jest method where the actual test functionalities are written. Just like a describe block, it takes 2 arguments: It takes two arguments: a string for describing the test suite and a callback function for wrapping the test functionality. An alternative method to it is test. Let’s start by writing one that tests if all our form inputs were correctly rendered. We’ll do this in our describe block.

In our it block we’ll pass our Index component to a render method. render is a @testing-library/react method that simulates the render of the React component passed as an argument.

We then proceed to loop through our formInputValues using forEach . For each value, we call screen.getByLabelText on value.label . screen is a @testing-library/react object that exposes methods used to query our component previously rendered, one of which is getByLabelText . getByLabelText is used to retrieve one element with the label passed as an argument.

We pass the value returned from screen.getByLabelText as an argument to expect . expect is a Jest method that allows us access to matchers that help us test for certain conditions. An example of a matcher which we use is toBeInTheDocument , calling it on our expect function checks if our argument passed to expect is present in the component we rendered, i.e in the document.

In essence, we expect elements with labels in our formInputValuesarray to exist in our component.

Let’s add two more tests to complete our test cases. One that’ll check if our button is present in the document and another that’ll check if our button loads after it’s clicked.

In our 2nd it block, we render Index, retrieve our button by calling the getByRole method from the screen object and initialize submitButton with the value. getByRole takes several arguments but for this tutorial, we only pass the name of the role we are querying for and an object containing the name of the button (The button’s text). We use two matchers to test for our button. toBeInTheDocument and not.toBeDisabled check if our button is present and not disabled.

Note: Using not before any matcher tests for the reverse of the matcher.

In our 3rd it block, we render Index and retrieve our submitButton . We loop through our inputFormValues array, get the respective inputs, and use fireEvent.change to simulate filling each input with values from our array.

fireEvent is an object from @testing-library/react with methods used to simulate real dom events. We used change to change the form values and then we use click to simulate a click on our button.

At last, we check if the value of our button has now been changed to Loading… after the click. We’re able to do that with another query method, findByRole . It is similar to getByRole but it returns a promise that’s resolved after a while.

Note: If you expect that your fireEvent changes won’t reflect immediately use findBy, rather than getBy.

Our index.test.js should now look like this:

run npm test a to see your test results, you should see something like this

PASS  tests/pages/index.test.js (14.833 s)

  Simple working form

    √ Should render all form inputs (208 ms)

    √ Should render submit button (458 ms)

    √ Should submit when inputs are filled and submit button clicked (303 ms)

Test Suites: 1 passed, 1 total

Tests:       3 passed, 3 total

Snapshots:   0 total

Time:        30.426 s

Ran all test suites matching /a/i.

Conclusion

Congratulations, we’ve successfully tested our Next.js app. Feel free to include more test cases/increase the scope of the tests. The full project is available here on my GitHub.

For more details on the tools used in this tutorial check out the Next.js, Jest, and React Testing Library docs.

I’ll appreciate feedback on this tutorial :), Goodluck coding!

User re-authentication in your React app.

Chidera Ani — Fri, 10 Jun 2022 08:18:04 +0000

An approach to authenticating your users after a period of idle time.

Intro…

One of the ways to beef up your app’s security is to re-authenticate users when necessary. In this guide, we’re going to implement a re-authentication feature on a frontend application using react-idle-timer library to detect when a user has been idle after some time. For this guide, the authentication setup will just be localStorage .

**React-idle-timer **is a javascript library used to detect and monitor user activity on your web application. We’ll be using it for this application, run yarn add react-idle-timer to install on your repo.

The App.

Our Nextjs app will have 2 pages namely login.js and index.js . login.js will contain the login view and logic while index.js will contain our “dashboard” screen and the re-auth logic.

In login.js we’ll create a simple login form and a login function that saves a random token to localStorage and redirects to our index.js page.

For this guide, only the form button is truly functional but ensure your form inputs are also functional in your app.

Next up is our index.js page where the re-auth feature is implemented.

We import useIdleTimer hook from react-idle-timer and call it passing in some properties.

const { isIdle } = useIdleTimer({

onIdle,

timeout: 15000

});

We’re passing 2 properties;

onIdle: a function that is called when our user is idle after some time.
timeout: a period (in milliseconds) of inactivity after which our user is declared idle (onIdle is called). We made timeout 15 seconds for this guide, however in a real app timeout can be 15–30 minutes

useIdleTimer accepts other properties like onActive, crossTab, startManually, etc. but for the purpose and simplicity of this guide, we’ll stick to just 2 properties.

Finally, In our index.js file we create a modal that becomes visible when a user has been idle and the user enters their password to re-authenticate themselves. If they close the modal or reload the page logout function is called.

We’ve gone through a simple way to implement re-authentication in your web apps. You should check out the react-idle-timer documentation for more info and use cases.

Happy coding…..

The difference between get, find, query (React Testing Library).

Chidera Ani — Sat, 01 Jan 2022 14:48:53 +0000

Choosing a suitable query type while working with React Testing Library.

Intro

React Testing Library (RTL) gives developers methods to find elements on the component it rendered for testing, these methods are called queries. There are 3 main types of RTL query types namely get, find and query.

In this guide we’ll be looking at the differences and tips to note while working with any of these query types.

get

getBy : returns the matching node, however will throw an error if multiple matches or no matches are found.
getAllBy : returns an array of matching nodes if at least one match is found and throws an error if no match is found.

Tip : Use these methods if you expect the element / elements to be present upon query.

query

queryBy : returns the matching node if one match is found and null if no match is found, however will throw an error if multiple matches are found.
queryAllBy : returns an array of matching nodes if at least one match is found and an empty array if no match is found.

Tip : Use these methods if you are looking to confirm presence of an element / elements.

find

findBy : returns a promise that returns the matching node, however will throw an error if multiple matches or no matches are found.
findAllBy : returns a promise that returns an array of matching nodes if at least one match is found and throws an error if no match is found.

Tip : Use these methods if the element / elements being queried might display asynchronously (for example, if your element is expected to only display after an event is fired consider using find as it retries the query after some time).

For more information on the queries check out the React Testing Library docs. I’ll appreciate feedback :).

Good luck coding!

Managing auth state in your Angular Firebase app

Chidera Ani — Wed, 15 Jul 2020 16:32:58 +0000

Managing auth state in your Angular Firebase app.

Firebase authentication usually comes in handy when building any type of application. It helps manage your app’s users, auth state, as well as track user sessions.

In this article we’ll go through tracking authentication state in your angular application and emitting changes to other components using Firebase’s onAuthStateChanged Observable and an RXJS Subject.

let’s dive in……..

In the signin.component.ts , we get login data from the form in our template, which we will then pass to our auth service for authentication.

In our auth.service.ts, we import BehaviourSubject and Observable from RXJS. BehavourSubject is a special type of Observable that allows values to be multicast to many Observers. We also import AngularFireAuth from Angular Fire and auth from Firebase/app.

The following steps explain the process.

Step 1: Initialize a property, currentUser.

Step 2 : Initialize a new BehaviourSubject called authStatusSub and pass currentUser as it’s first value.

Step 3 : Initialize a property, currentAuthStatus which returns authStatusSub as an Obvservable that can be observed across components.

Step 4 : Create a method called authStatusListener and used onAuthStateChanged to check auth state. If a user is Logged in, we call authStatusSub.next and pass in the current user credentials however if no user is logged in, we pass null into authStatusSub.next.

authStatusSub.next passes the current value to all Observers. See https://rxjs-dev.firebaseapp.com/guide/subject for more explanation.

Let’s proceed to listen to it’s emissions in another component.

In header.component.ts, we subscribe to currentAuthStatus from our auth service and pass it’s value into an earlier initialized isAuthenticated property.

In header.component.html, we use conditionals to check if isAuthenticated is truthy or falsy, and then proceed to display elements in accordance.

We’ve been able to successfully track auth state and emit new changes in our auth status across different components. We’ve also been able to subscribe and get emitted values and use in our application logic.

Goodluck coding….