DEV Community

Mohammad Waseem
Mohammad Waseem

Posted on

Overcoming Geo-Blocked Features in TypeScript Without a Budget

#typescript #testing #geolocation

Overcoming Geo-Blocked Features in TypeScript Without a Budget

In today's globally distributed applications, geo-restrictions pose significant challenges for testing features that are region-specific or geo-locked. As a senior architect, my goal was to enable comprehensive testing of geo-restricted features without incurring additional costs or relying on third-party VPN services. This post outlines a practical, zero-budget approach using TypeScript and open-source tools.

Understanding the Challenge

Geo-blocked features often depend on the client's IP address, geolocation APIs, or regional server endpoints. Directly simulating these conditions during tests is difficult without access to regional infrastructure or paid VPN/IP rotation services. The core problem is to mimic the user's regional context in a controlled and automated manner.

Strategy Overview

The key to a zero-budget solution is leveraging local proxies, geolocation spoofing, and mocking APIs. Instead of changing your network environment, you can intercept geo-lookup requests locally and inject fake responses that simulate being from specific regions.

Implementation Steps

1. Mocking Geolocation API Responses

Start by identifying how your application performs geo-detection. Usually, this involves calls to APIs like fetch('https://ip-api.com/json/') or similar. To simulate geo-specific conditions:

// geoMock.ts
export const geoMocks: Record<string, any> = {
  "US": { countryCode: "US", regionName: "California" },
  "FR": { countryCode: "FR", regionName: "Île-de-France" },
  // Add more regions as needed
};

export function mockGeoResponse(region: string) {
  return new Response(JSON.stringify(geoMocks[region]), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
}
Enter fullscreen mode Exit fullscreen mode

2. Intercepting Fetch Calls During Tests

By overriding the native fetch in your test setup, you can intercept requests to geo-lookup endpoints and return mocked data.

// testSetup.ts
import { geoMocks, mockGeoResponse } from './geoMock';

const originalFetch = window.fetch;

window.fetch = async (input: RequestInfo, init?: RequestInit) => {
  if (typeof input === 'string' && input.includes('ip-api.com')) {
    const region = 'US'; // or dynamically set during tests
    return mockGeoResponse(region);
  }
  return originalFetch(input, init);
};
Enter fullscreen mode Exit fullscreen mode

This method ensures that during testing, your application perceives itself as operating from different regions, enabling thorough testing of geo-specific features.

3. Automating Region Switches

Create a simple interface or environment variable to switch geographical contexts during tests:

// geoSwitcher.ts
export function setRegion(regionCode: string) {
  // Update a global variable or context used in mocks
  window['testRegion'] = regionCode;
}

// Usage in tests
setRegion('FR'); // Simulate France
Enter fullscreen mode Exit fullscreen mode

4. Using Local Proxies for Advanced Simulation

For more control, set up a local proxy server using Node.js that can modify responses based on request headers. Here's a minimal Express example:

// localProxy.ts
import express from 'express';
const app = express();

app.use('/geo', (req, res) => {
  const region = req.headers['x-region'] as string || 'US'; // default to US
  const data = geoMocks[region] || geoMocks['US'];
  res.json(data);
});

app.listen(3000, () => console.log('Proxy running on port 3000'));
Enter fullscreen mode Exit fullscreen mode

Configure your application or tests to route geo-lookup requests through this proxy and set the x-region header accordingly.

Benefits and Limitations

This approach is cost-free, highly flexible, and easily integrated into existing testing workflows. However, it primarily applies to front-end testing and mock-based validation, not real-world network conditions or server responses. It also requires that your application's geo-detection relies on accessible endpoints that can be intercepted or overridden.

Final Thoughts

By leveraging TypeScript's flexibility, browser APIs, and open-source tools, you can simulate geo-restrictions effectively without spending money on VPNs or third-party APIs. This method empowers developers to create robust, region-sensitive features tested thoroughly in local environments, aligning with best practices in agile, cost-efficient development.

References

🛠️ QA Tip

I rely on TempoMail USA to keep my test environments clean.

Top comments (0)