The Problem with Traditional UI Testing

UI testing fundamentally falls into two categories: integration tests and end-to-end (E2E) tests. Each approach has significant limitations that create gaps in test coverage.

Integration Testing Drawbacks

Libraries like React Testing Library provide fast execution and straightforward component testing. However, these tests run in js-dom rather than a real browser environment. This creates critical blind spots:

• Tests cannot detect CSS issues like z-index problems that make buttons unclickable
• Event simulation is fragile and doesn't match actual user interactions
• Complex components like dropdowns require elaborate setups (hover before click)
• Input fields in custom components need special handling that breaks easily
• Debugging failures is difficult without browser dev tools

E2E Testing Limitations

Tools like Cypress and Playwright run against real browsers and actual applications, catching issues that integration tests miss. Yet they introduce their own challenges:

• Cannot test components in isolation without additional infrastructure
• Authentication setups are complex and often require service overriding
• External dependencies like OAuth make component-level testing impossible
• Test fixture configuration becomes unwieldy for different user roles
• Running against full applications slows test execution significantly

The two approaches are nearly complementary—integration tests are fast but incomplete, E2E tests are thorough but slow and cumbersome.

SafeTest: Combining Both Approaches

SafeTest bridges the gap between integration and E2E testing by providing a unified API that offers the best of both worlds:

• Component-level testing with real browser rendering
• Easy setup without complex authentication mocking
• Full application testing capabilities
• Visual regression testing with screenshot comparison

Code Example

Consider a Navigation component that displays different options based on user role:

// Navigation.tsx
import React from 'react';

interface NavigationProps {
  isAdmin?: boolean;
  username: string;
}

export const Navigation = ({ isAdmin = false, username }: NavigationProps) => (
  <nav className="navigation">
    <div className="nav-brand">MyApplication</div>
    <div className="nav-menu">
      <span className="nav-user">{username}</span>
      {isAdmin && <button className="nav-settings">Settings</button>}
      <button className="nav-logout">Logout</button>
    </div>
  </nav>
);

Testing with SafeTest:

// Navigation.safetest.tsx
import { describe, it, expect } from 'safetest/jest';
import { render } from 'safetest/react';
import { Navigation } from './Navigation';

describe('Navigation', () => {
  it('displays standard user interface', async () => {
    const { page } = await render(<Navigation username="john" />);
    await expect(page.locator('text=Logout')).toBeVisible();
    await expect(page.locator('text=Settings')).not.toBeVisible();
    await expect(page.locator('text=john')).toBeVisible();
  });

  it('displays admin user interface', async () => {
    const { page } = await render(<Navigation username="admin" isAdmin={true} />);
    await expect(page.locator('text=Logout')).toBeVisible();
    await expect(page.locator('text=Settings')).toBeVisible();
    await expect(page.locator('text=admin')).toBeVisible();
  });
});

If you've used Cypress or Playwright, SafeTest's API will feel immediately familiar.

Key Features

Browser Integration: SafeTest uses Playwright to execute tests in real browsers. Browser lifecycle management is handled automaticallly, letting developers focus on writing tests.

Test Runner Support: SafeTest integrates with both Jest and Vitest. Use whichever test runner matches your project configuration.

Framework Compatibility: While designed primarily for React, SafeTest works with Vue, Svelte, Angular, and even supports Next.js applications.

Authentication Handling: SafeTest provides hooks for managing authentication flows across tests, eliminating the need to manually mock auth services.

Visual Testing: Built-in screenshot comparison and visual regression detection help catch UI bugs that functional tests might miss.

How It Works

SafeTest injects test hooks into your application's startup process. This injection uses lazy loading, ensuring that test code only loads when tests run—production bundles remain unaffected.

The architecture leverages Playwright's browser control capabilities while providing Jest-compatible test syntax. This combination delivers comprehensive testing without the overhead of traditional E2E setups.