Jest is a test framework popular in the React community and Puppeteer is a headless browser library. Together, using jest-puppeteer and MailSlurp, we can write automated tests that submit real email addresses in a real browser.

This testing software combination is excellent for testing email dependent processes like user sign-up and email verification.

Writing a test

In this article we will show you how to write automated tests that generate email addresses and sign-up for a dummy authentication application. We then extract the confirmation code from an a welcome email and confirm the users account.

Install

First create a NodeJs project:

Then install the dependencies:

Configure

Next we need to setup Jest to find our tests and to use puppeteer. Edit to include the following:

Loading the playground

We will use the MailSlurp authentication playground to sign-up a user. We will then receive a verification email and extract the code and verify the account. The playground website looks like this:

[playground]

To load this site in a Jest test let's create one:

Inside the test let's add code to load the playground in a headless browser.

If we now run this test we will see the following result:

Testing the sign-up process

Now that we know how to write tests let's use MailSlurp to sign-up with a new email address. We can generate test email accounts on demand with MailSlurp and use them to test email processes.

Receiving the welcome email

Once we have signed up a user we should then receive the confirmation email inside the test using MailSlurp and extract the confirmation code:

Confirming the account

Now that we have received the email address in code we can use Jest and Puppeteer to fill out the confirmation form and submit the confirmation code.

Test user login

Now that our account is confirmed we can login with the email address we generated and the test password. The end result should show a welcome screen

A screenshot of the welcome screen shown after successful logins:

welcome

Running the example

Now when we execute our tests we can see a full sign-up, confirmation, and login flow being tested with real email addresses.

We hope this example helps. For more information please see: