Test user sign-up in React with Jest and Puppeteer

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:

• MailSlurp Documentation
• Jest Puppeteer Documentation