Imagine you are sending beautiful HTML emails using your own SMTP server or even a 3rd party service like SendGrid. What if the emails are formatted incorrectly? What if the template string is incorrect and the user sees Dear <<undefined>>? Can you test the emails to make sure they really work?

In this blog post I will describe the full cycle email testing. We will send actual emails using 3rd party service SendGrid and we will fetch that email from a temporary email account hosted by Ethereal.email service to test it using Cypress Test Runner.

You can find the full source code for this blog post at cypress-ethereal-email-example.

The application

Our application is a Next.js web app where the user can register for a service. To cut down on bots, the registration sends the user an email with the confirmation code to be entered by the user to complete the registration process.

The user enters their email to register

The email is sent by the application using the SendGrid SMTP server. The email includes the plaintext and rich HTML versions.

If we click on the “Confirm registration” button, the browser opens at the app’s URL, in the simplest case at localhost:3000/confirm and if the user enters the right code the registration is complete.

Let’s look how we can test the confirmation email flow.

#tutorials #html #emails #sendgrid #ethereal accounts