Test email accounts with Jest and Puppeteer
Test email accounts in React with Jest and Puppeteer. Send and receive emails in Javascript.
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:
npm init -y
Then install the dependencies:
npm install --save-dev jest jest-puppeteer puppeteer mailslurp-client
Configure
Next we need to setup Jest to find our tests and to use puppeteer. Edit package.json
to include the following:
{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "jest-puppeteer",
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$"
}
}
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:
To load this site in a Jest test let's create one:
touch sign-up.test.js
Inside the test let's add code to load the playground in a headless browser.
const assert = require('assert');
const MailSlurp = require('mailslurp-client').default;
const mailslurp = new MailSlurp({ apiKey: process.env.API_KEY });
describe('sign-up process', () => {
it('can load oauth demo site', async () => {
await page.goto('https://playground.mailslurp.com')
await expect(page).toMatch('Sign in to your account')
})
If we now run this test we will see the following result:
$ API_KEY=your-api-key npm t
PASS ./sign-up.test.js (1.165s)
sign-up process
✓ can load oauth demo site (567ms)
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.
it("can click sign up link", async () => {
await expect(page).toClick('[data-test="sign-in-create-account-link"]');
await expect(page).toMatch("Testable Sign Up Form");
});
const password = "test-password";
let inbox;
let code;
it("can sign-up with a new email address", async () => {
// IMPORTANT: create a new email address for the test run
inbox = await mailslurp.createInbox();
// fill out the new user form with generating email address
await expect(page).toFillForm('[data-test="sign-up-body-section"]', {
email: inbox.emailAddress,
password: password,
});
// submit the new user form (which will send a confirmation email)
await expect(page).toClick('[data-test="sign-up-create-account-button"]');
});
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:
it("can fetch confirmation code", async () => {
// fetch the email from mailslurp
const email = await mailslurp.waitForLatestEmail(inbox.id);
// verify that it contains the code
assert.strictEqual(/verification code is/.test(email.body), true);
// extract the confirmation code
code = /([0-9]{6})$/.exec(email.body)[1];
});
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.
it("can enter confirmation code and confirm user", async () => {
await expect(page).toFillForm('[data-test="confirm-sign-up-body-section"]', {
code: code,
});
await expect(page).toClick('[data-test="confirm-sign-up-confirm-button"]');
});
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
it('can log in with confirmed account', async () => {
await expect(page).toMatch('Sign in to your account')
// fill out username (email) and password
await expect(page).toFillForm('#root', {
username: inbox.emailAddress,
password: password
})
// submit
await expect(page).toClick('[data-test="sign-in-sign-in-button"]')
});
it('shows the successful greeting', async () => {
await page.waitForFunction('document.body.innerText.includes("Welcome")');
await expect(page).toMatchElement('h1', { text: 'Welcome' })
})
})
A screenshot of the welcome screen shown after successful logins:
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.
PASS ./sign-up.test.js (9.165s)
sign-up process
✓ can load oauth demo site (567ms)
✓ can click sign up link (18ms)
✓ can sign-up with a new email address (1733ms)
✓ can fetch confirmation code (2868ms)
✓ can enter confirmation code and confirm user (104ms)
✓ can log in with confirmed account (690ms)
✓ shows the successful greeting (2948ms)
We hope this example helps. For more information please see:
Related content
Golang email library
Golang Email Library for sending and receiving emails in Go over SMTP or HTTP/S.
Javascript email libraries for MailSlurp
Nodemailer alternatives to send and receieve email in code and tests
Email for testing
Test email accounts for email testing. Alternatives to Mailinator, MailTrap, Mailosaur and more.
How to wait for Selenium to start during Codeception tests
Example tutorial for how to wait until webdriver and Selenium have started during Codeception PHP tests
Email API for email marketing and more
APIs for email marketing and social campaign testing. Send, receive, validate and test emails in code and online.
Fastest way to start a typescript project
Modern typescript tooling has come a long way. See how to setup a new project with TS-Node, TSC, and typeconfig.json.
Fetch error message javascript
Handle response exceptions with Fetch in Javascript
GraphQL API disposable email accounts
How to create real email addresses using GraphQL to send and receive emails in tests and frontend applications.
GraphQL Email API Tutorial
Did you know you can send and receive emails using GraphQL?
How to test an email address
Test email accounts for testing email addresses in code or online. Create fake email accounts for testing.
Hugo responsive image srcsets
Serve responsive picture tags with custom render-image layout partial in Hugo static site generator.
NodeMailer NPM Tutorial
Send and receive email using NodeMailer in Node JS.
How to start selenium in a background process and wait for i...
Spawn Selenium server process before tests start for easier acceptance testing.
Create custom print classes with Tailwind
Configure tailwind.config.js to create prefixed classes with a custom media query.
Send and receive email in Cypress JS tests with MailSlurp
Test email sign-up. password verification and more with Cypress JS and MailSlurp.
Cypress Email Plugin - Test email accounts in Javascript (an...
Use real email accounts in CypressJS to test user sign-up, email verification, and more.
Golang mail Library (SMTP)
How to send and receive emails in Go (test email addresses).
Email APIs for Java and Kotlin projects
Test email sending and receive emails without a mail server.
Java TestNG Selenium user sign up testing with real email ad...
Testing user sign up in Java using TestNG and MailSlurp test email accounts
Codeception PHP acceptance testing using real email address ...
Write acceptance tests in PHP with real email addresses using Codeception and MailSlurp
PHP Email Test Plugins: send and receive email in PHPUnit (e...
How to send and receive emails in PHPUnit tests.
PyTest email testing
Send and receive email in Pytest Python tests.
Selenium test email plugins: send and receive email in tests...
Receive emails in Java test suites using MailSlurp, Junit, and Selenium.
Receive email in PHP: using MailSlurp to send and receive em...
Test email in PHP using real email addresses
Testing authentication using real email addresses in Ruby wi...
Cucumber example project using Capybara to test user authentication using real email addresses.
Send email with Axios JS (and receive email too!)
Send email in Javascript with MailSlurp email API
Test applications with real emails using Serenity BDD, JBeha...
Email acceptance testing with Serenity and MailSlurp. Test applications with real email addresses.
.NET SpecFlow testing using MailSlurp email accounts and Sel...
How to test .NET authentication and sign-up using real email accounts with MailSlurp and SpecFlow.
Test email accounts with Jest and Puppeteer
Test email accounts in React with Jest and Puppeteer. Send and receive emails in Javascript.
Test Emails in Selenium with DotNet, CSharp and MailSlurp
Send and receive email in DotNET Nunit tests using Selenium and MailSlurp.
Test emails with Cucumber and Ruby
Generate test email accounts with Ruby and Cucumber. Test email sign-up, password verification and more.
Test user sign-up with NodeJS and WebDriver
Test email related processes like sign-up and verification using WDIO WebDriver and MailSlurp.
TestCafe end-to-end MFA testing for user sign-up and email v...
End-to-end testing with MailSlurp, NodeJS, and TestCafe.
Base64 file uploads
How to encode files as Base 64 encoded strings in several languages
Deno Email Apis
Send and receive emails in Deno JS. Use APIs in Deno with MailSlurp.
Email read (opened seen settings)
How to control the seen or read settings for an email using MailSlurp.
How To Test Emails Before You Send
There are many free tools to test emails before sending. This can help prevent spam warnings and increase deliverability...
GraphQL Email API
Fetch and read emails with GraphQL inboxes using MailSlurp email API.
Testing OTP password link username and password for 2 factor...
Testing OTP password link username and password for 2 factor authentication (2FA)
MailSlurp NodeMailer SMTP Usage
Use SMTP nodemailer with MailSlurp disposable email addresses
Test email address
Free test email address for testing emails online with web dashboard or REST API.
Testing email-related functionality with MailSlurp
Use MailSlurp to test email related functionality using real email addresses.
Testing email with Cypress test email accounts
Test email accounts for CypressJS. End-to-end testing with real email addresses using MailSlurp Cypress plugin.
Testing Webhooks
How to test HTTP webhooks using MailSlurp test hooks.
Send emails in NodeJS using SMTP
How to use Javascript SMTP client (or Nodemailer) to send email with MailSlurp mail server
Testing Email with Cypress JS and MailSlurp
Email testing with Cypress JS