pptr-mock-server

Tiny library for backendless testing using Puppeteer.

Intro

This library allows to define mock backend responses when testing web app with Puppeteer.

Internally it works purely via Puppeteer API using built-in setRequestInterception mechanism. It doesn't set up any servers and doesn't modify any window APIs like XMLHttpRequest. This provides great flexibility and performance when handling requests, since it operates on browser internal level.

Recommended reading: Automated UI Testing at Dock.

Installing

yarn add -D pptr-mock-server

Setting up

import puppeteer from 'puppeteer'
import mockServer from 'pptr-mock-server'

// typically your global test setup
const browser = await puppeteer.launch()
const page = await browser.newPage()
const baseAppUrl = 'http://localhost'
const mockRequest = await mockServer.init(page, {
  baseAppUrl,
  baseApiUrl: baseAppUrl + '/api/'
})

Basic usage

Once you have an instance of MockRequest you can pass it to your tests for registering mock responses:

const responseConfig = { body: { result: 'ok' } }
mockRequest.on('get', 'http://localhost/api/account', 200, responseConfig)

But since you provided baseApiUrl as http://localhost/api, you can use relative endpoint name. Also you can use .get() shorthand method instead of .on():

const responseConfig = { body: { result: 'ok' } }
mockRequest.get('account', 200, responseConfig)

When your app performs request to the specified resource, it will respond with the mock response provided.

Common scenarios

Handle request to relative endpoint using .on method:

const responseConfig = { body: { result: 'ok' } }
mockRequest.on('get', 'account', 200, responseConfig)

Using shortcut .get method and absolute url:

const responseConfig = { body: { result: 'not found' } }
mockRequest.get('https://example.com/test', 404, responseConfig)

Simulate request timeout:

mockRequest.post('search', null, { abort: 'timedout', delay: 10000 })

Mocking sequence of identical requests

Once you setup a mock request handler, every matching request will be responded with it. However it's a common scenario when you need to mock a sequence of requests, when over time the same request produces different results. Recommended way to do it is to replace previously registered mock response using new one:

const responseConfig = { body: { result: 'ok' } }
mockRequest.get('account', 200, responseConfig) // returns 200 on each request
// test deleting account logic here
// after account is deleted we want to return 401 instead of 200
mockRequest.get('account', 401) // replaces existing handler

Full API reference 👉

License