Quick Start

Choose your framework and get testing in 5 minutes:

⚛️ React

Installation

# For React 19 with MUI v7
pnpm add @atomic-testing/core @atomic-testing/component-driver-html @atomic-testing/react-19 @atomic-testing/component-driver-mui-v7

# For React 18 with MUI v6
pnpm add @atomic-testing/core @atomic-testing/component-driver-html @atomic-testing/react-18 @atomic-testing/component-driver-mui-v6

# For React 17 or earlier with MUI v5
pnpm add @atomic-testing/core @atomic-testing/component-driver-html @atomic-testing/react-legacy @atomic-testing/component-driver-mui-v5

Your First Test

import { HTMLComponentDriver } from '@atomic-testing/component-driver-html';
import { ButtonDriver } from '@atomic-testing/component-driver-mui-v7';
import { byDataTestId } from '@atomic-testing/core';
import { createTestEngine } from '@atomic-testing/react-18';

// Component to test
function WelcomeButton({ name }: { name: string }) {
  const [clicked, setClicked] = useState(false);

  return (
    <div>
      <h1 data-testid='greeting'>Hello {name}!</h1>
      <button data-testid='welcome-btn' onClick={() => setClicked(true)}>
        {clicked ? 'Welcome!' : 'Click me'}
      </button>
    </div>
  );
}

// Test setup
const welcomeScene = {
  greeting: { locator: byDataTestId('greeting'), driver: HTMLComponentDriver },
  button: { locator: byDataTestId('welcome-btn'), driver: ButtonDriver },
};

// Test
it('should welcome the user when clicked', async () => {
  const engine = createTestEngine(<WelcomeButton name='Alice' />, welcomeScene);

  // Check initial state
  expect(await engine.parts.greeting.getText()).toBe('Hello Alice!');
  expect(await engine.parts.button.getText()).toBe('Click me');

  // Interact and verify
  await engine.parts.button.click();
  expect(await engine.parts.button.getText()).toBe('Welcome!');

  await engine.cleanUp();
});

💚 Vue 3

Installation

pnpm add @atomic-testing/vue-3 @atomic-testing/component-driver-html

Your First Test

import { HTMLButtonDriver, HTMLComponentDriver } from '@atomic-testing/component-driver-html';
import { byDataTestId } from '@atomic-testing/core';
import { createTestEngine } from '@atomic-testing/vue-3';
import { ref } from 'vue';

// Component to test (SFC-like)
const WelcomeButton = {
  props: ['name'],
  template: `
    <div>
      <h1 data-testid="greeting">Hello {{ name }}!</h1>
      <button 
        data-testid="welcome-btn" 
        @click="handleClick"
      >
        {{ clicked ? 'Welcome!' : 'Click me' }}
      </button>
    </div>
  `,
  setup() {
    const clicked = ref(false);
    const handleClick = () => (clicked.value = true);
    return { clicked, handleClick };
  },
};

// Test setup (identical to React!)
const welcomeScene = {
  greeting: { locator: byDataTestId('greeting'), driver: HTMLComponentDriver },
  button: { locator: byDataTestId('welcome-btn'), driver: HTMLButtonDriver },
};

// Test (identical to React!)
it('should welcome the user when clicked', async () => {
  const engine = createTestEngine(WelcomeButton, welcomeScene);

  // Same test logic as React version ✨
  expect(await engine.parts.greeting.getText()).toBe('Hello Alice!');
  await engine.parts.button.click();
  expect(await engine.parts.button.getText()).toBe('Welcome!');

  await engine.cleanUp();
});

🎭 Playwright

Installation

pnpm add @atomic-testing/playwright @atomic-testing/component-driver-html

Your First Test

import { HTMLButtonDriver, HTMLComponentDriver } from '@atomic-testing/component-driver-html';
import { byDataTestId } from '@atomic-testing/core';
import { createTestEngine } from '@atomic-testing/playwright';
import { test, expect } from '@playwright/test';

// Same scene definition as React/Vue ✨
const welcomeScene = {
  greeting: { locator: byDataTestId('greeting'), driver: HTMLComponentDriver },
  button: { locator: byDataTestId('welcome-btn'), driver: HTMLButtonDriver },
};

test('should welcome the user when clicked', async ({ page }) => {
  // Navigate to your app
  await page.goto('/welcome');

  // Create test engine with same scene
  const engine = createTestEngine(page, welcomeScene);

  // Same test logic as React/Vue versions ✨
  expect(await engine.parts.greeting.getText()).toBe('Hello Alice!');
  await engine.parts.button.click();
  expect(await engine.parts.button.getText()).toBe('Welcome!');
});

✨ The Magic

Notice how the test logic is identical across frameworks:

1. Same Scene Definition: welcomeScene works everywhere
2. Same Test Code: engine.parts.button.click() works everywhere
3. Same Component Drivers: HTML/MUI drivers work everywhere

This means: Learn once, test everywhere. Your testing knowledge transfers completely between frameworks.

🎯 What Just Happened?

1. ScenePart: Defined which components matter (greeting, button)
2. Locators: Found components using byDataTestId()
3. Drivers: Used semantic APIs (click(), getText()) instead of DOM manipulation
4. TestEngine: Orchestrated everything together

Next Steps

🏗️ Build Your First Real Test

Follow our step-by-step tutorial with a complete login form example.

Start Tutorial →

📦 Choose Your Packages

Not sure which packages you need? We'll help you decide based on your stack.

Package Guide →

🤔 Questions?

• "This seems like extra setup..." → See Why Atomic Testing? for long-term benefits
• "How do I test complex forms?" → Check out the Step-by-Step Tutorial
• "What about my existing tests?" → We're working on a migration guide!