Testing URLs Express.js using Puppeteer and Portfinder with Jest

I am learning how we can use Jest to test URLs and emulate button clicks from a user, and we can use Pupperteer to launch a browser where we can test, and also we can use Portfinder to find a free port, and let’s start with my last post and his code to start testing right away!

If you worked with my old projects this will help you if not check them out

Express.js basic server

Express.js and handlebars

Dynamic data with Express.js this is the important

Testing Express.js with Jest small project and this is my last post

Puppeteer

Like his official web page said:

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol

In other words, we can use Chrome with Node.js. Yeah! It is awesome when we can use it with jest.

Remember to install Jest too if not, check this post

Portfinder

Portfinder is a library that it search for port to port to find a free port that is all

Let’s start with the video

If you want to watch all of this, here is the video

Let’s start with the code

Install Puppeteer and Portfinder

npm i --save-dev puppeteer portfinder

Example installing puppeteer and portfinder

Add a’s tag to our project or the home page with redirect to about and the interesting part of this is that we need to add something to link our a’s tag that is why I added a data-test=”about” to easy search for it.

Example adding a’s tag to our project with redirect to about

Change our server file, adding a conditional, this is because if we want to initiate our server with the command node it will start the server if not we will export and use it in other things like tests.

if( require.main === module ){
app.listen( port, console.log(`Server is on http://127.0.0.1:${ port}` ))}else{
module.exports = app
}

Example adding conditional

Create our test directory and test file where we will make the tests

Example test directory and test file

Important! Since Express-handlebars update its library, you need to change the import

import { engine } from 'express-handlebars';

And change the handleExp for this

app.engine( 'handlebars', engine({
defaultLayout: 'main'
}))

Add code to the file xD

const puppeteer   = require( 'puppeteer' )
const portfinder  = require( 'portfinder' )
const app         = require( './../servidor2_' )
let serv = null,
port = null
beforeEach( async () =>{
port = await portfinder.getPortPromise()
serv = app.listen( port )
})
afterEach( () => {
serv.close()
})
test( 'Testing click button and arrow page', async () => {
const browser = await puppeteer.launch()const page    = await browser.newPage(); await page.goto( `http://127.0.0.1:${ port }` ); await Promise.all([page.waitForNavigation(),page.click( '[ data-test="about" ]' )])expect( page.url() ).toBe( `http://127.0.0.1:${ port }/about` )browser.close()
})

First of all, we need puppeteer portfinder and the app that is why we need the require for each part, then the serv and port where we save the serv and the port from portfinder and app started.

Second, we start with beforeEach async await because portfinder works with promises and we save our app in the serv with the free port that we will have, we closed the server with the afterEach.

Third, we opened the test function and inside we add the test paragraph and the async await function because puppeteer work with promises too we require the browser (Puppeteer) and a new page like we have done it, every time in our Chrome UI application, then we wait for all promises to be completed and one is for navigate and the other one is to click on our a’s tag to redirect to our about page.

Finally, we write expect with the page URL method and toBe to be precise if the page is the page that we need, and we close the browser.

Example complete code for test our click and URL server

Run tests

You need to have this script in your JSON Package

Example script package JSON

And then just run this command

npm run test

And we can see that the test is going well and that is checking all the tests :D

Example testing our about URL with Jest, output from the console

Conclusion

In conclusion, Puppeteer is a great tool to test and check other things, using Node.js, it works with promises and portfinder is the easiest way to find a free port for our test if we are using a specific port on our server, and Jest is the final step to keep the high quality of your projects, this is a small project with Express.js and this is the first step to keep making good tests!

Sources

Puppeteer | Tools for Web Developers | Google Developers

portfinder

Web Development with Node and Express: Leveraging the JavaScript Stack

Jest