Adrian Payne | Frontend Dev Blog

Adrian Payne
Frontend Engineer

Who am I?

Adrian spends most of his time being a Senior Frontend Engineer in Hamburg. When he's not doing that, he likes to sing and play hurling with Hamburg GAA.

What I write about

Why the domain?

I'm a frontend developer and I'm from Ireland :)

Recent Posts

Sign up for an awesome Lootcrate!

How to mock Google Places with Cypress

If you've ever tried to mock a Google Places services response by copy-pasting a real response, with the aim of catching the request in Cypress intercept and returning that response in a fixture, you'll likely have received an error in your test run.

Why doesn't it work as expected?

If we take a closer look at the response, whether it be the Google autocomplete predictions response or, for example, the Google geocode service response, we'll notice something odd. The stringified JSON has been wrapped and prefixed with some data as in the example below.

/**/_xdc_._arqn3n && _xdc_._arqn3n({
  "predictions" : [
  "status" : "OK"

This prefixed data is the problem. The values here are expected by the Google package responsible for parsing the response... but they are not always the same. If they don't match up, we get an error.

The solution!

Luckily for us, this data is included in the request URL in a param called callback. We can extract this value from the URL during the lifecycle of a cy.intercept and wrap our mock data with it to satisfy the parser and resolve the error.

// Util function stored elsewhere e.g. cypress/utils/
export const wrapResponse = (request, mockData) => {
    const searchParams = new URLSearchParams(request.url);
    const callbackParam = searchParams.get("callback");
    request.reply(`${callbackParam} && ${callbackParam}(${JSON.stringify(mockData)})`);

// A cypress intercept making use of the wrapResponse util
    request => wrapResponse(request, mockData)
The mockData value is simply the JS object part of the regular response, as if it hadn't been wrapped with all that other stuff.

Happy testing!

Posted in javascript, testing on by

Share this post:
This site is run on Digital Ocean. Sign up for yours!