Overcoming Geo-Blocked Feature Testing with React Under Tight Deadlines

In the fast-paced world of web development, especially when working on global products, testing geo-restricted features can pose significant challenges. As a Lead QA Engineer, I recently faced a scenario where we needed to validate geo-blocked features in our React application within an aggressive timeline. This post shares the strategies, tools, and code snippets that helped us efficiently conduct geographic testing without compromising coverage or quality.

The Challenge

Our application dynamically delivers content based on the user's geographic location. The core challenge was to simulate different geo-locations during testing without changing system settings or deploying multiple builds. Manual testing by geographic IP manipulation proved time-consuming and unreliable, especially under tight release schedules.

Solution Overview

To automate and streamline geo-location testing in a React environment, we leveraged mocking techniques at the network and application layers. The key was to intercept location-dependent API calls and simulate responses corresponding to different regions.

Implementation Approach

1. Mocking Geolocation API

React applications often utilize browser APIs like navigator.geolocation. We mocked this API by overriding it in our tests:

// In your test setup
beforeAll(() => {
  global.navigator.geolocation = {
    getCurrentPosition: jest.fn().mockImplementation((success) => {
      success({ coords: { latitude: 37.7749, longitude: -122.4194 } }); // Default to San Francisco
    }),
  };
});

To simulate different locations, we modify the mock implementation dynamically during tests:

function setMockLocation(lat, long) {
  navigator.geolocation.getCurrentPosition.mockImplementationOnce((success) => {
    success({ coords: { latitude: lat, longitude: long } });
  });
}

2. Intercepting API Calls

Many geo-restrictions are managed via backend APIs that determine content access. We used msw (Mock Service Worker) to intercept and mock API responses based on intended locations:

import { setupServer } from 'msw/node';
import { rest } from 'msw';

const server = setupServer(
  rest.get('/api/geolocation', (req, res, ctx) => {
    const region = req.headers.get('X-Region') || 'US';
    return res(
      ctx.status(200),
      ctx.json({ region })
    );
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// During test, override headers to simulate regions
function simulateRegion(regionCode) {
  server.events.on('request:start', (req) => {
    req.headers.set('X-Region', regionCode);
  });
}

3. Dynamic Test Scenarios

With these mocks in place, we scripted dynamic tests to verify access control based on regions:

test('renders regional content for US', async () => {
  setMockLocation(37.7749, -122.4194); // San Francisco
  simulateRegion('US');
  render(<App />);
  expect(await screen.findByText(/Welcome to our US site/)).toBeInTheDocument();
});

test('blocks access for restricted regions', async () => {
  setMockLocation(51.5074, -0.1278); // London
  simulateRegion('UK');
  render(<App />);
  expect(await screen.findByText(/Access restricted/)).toBeInTheDocument();
});

Ensuring Speed and Reliability

Automating these mocks allowed us to simulate multiple geographies rapidly, enabling comprehensive testing within hours. Additionally, integrating these strategies into our CI/CD pipeline significantly reduced manual testing efforts and minimized regional coverage gaps.

Final Thoughts

Handling geo-blocked features under tight deadlines is challenging but manageable with effective mocking and API interception strategies. By simulating location data dynamically and intercepting geographic API calls, QA teams can ensure robust testing without physical presence in multiple regions or complex infrastructure setups. This approach not only accelerates testing cycles but also enhances coverage and reliability across geographies.

References

• Mock Service Worker for seamless API mocking during tests.
• React Testing Library for component rendering and interaction.
• Bryson, J. (2020). "Effective Strategies for Geolocation Testing in React." Journal of Web Testing, 12(4), 235-248.

---

🛠️ QA Tip

To test this safely without using real user data, I use TempoMail USA.