Skip to main content

Which Packages Do I Need?

🤔 Choose Your Testing Strategy​

DOM Testing (Fast, Unit-focused)​

Perfect for component testing, business logic, and rapid development cycles.

  • React Apps: @atomic-testing/react-18 or @atomic-testing/react-19
  • Vue Apps: @atomic-testing/vue-3
  • Vanilla JS: @atomic-testing/dom-core

E2E Testing (Slow, Integration-focused)​

Great for user flows, cross-browser testing, and production-like scenarios.

  • Any Framework: @atomic-testing/playwright

📦 Common Package Combinations​

# Most popular combination
pnpm add @atomic-testing/react-18 @atomic-testing/component-driver-mui-v7

# If you're using React 19
pnpm add @atomic-testing/react-19 @atomic-testing/component-driver-mui-v7

# If you're still on React 17
pnpm add @atomic-testing/react-legacy @atomic-testing/component-driver-mui-v6

Perfect for: Modern React apps with Material-UI components

🎯 Framework-Specific Details​

React Integration​

pnpm add @atomic-testing/react-18
  • ✅ React 18 concurrent features
  • ✅ Automatic batching support
  • ✅ Strict mode compatibility
  • ✅ Modern React patterns

Vue 3 Integration​

pnpm add @atomic-testing/vue-3
  • ✅ Automatic reactivity handling with nextTick()
  • ✅ SFC-like component support for easy testing
  • ✅ Vue Testing Library integration
  • ✅ Composition API compatibility

Playwright Integration​

pnpm add @atomic-testing/playwright
  • ✅ Cross-browser testing (Chrome, Firefox, Safari)
  • ✅ Mobile testing with device emulation
  • ✅ Screenshot and video recording
  • ✅ Network interception and mocking

🧩 Component Driver Libraries​

Material-UI Drivers​

pnpm add @atomic-testing/component-driver-mui-v7

Supports: TextField, Button, Select, Autocomplete, DataGrid, DatePicker, and more

HTML Drivers​

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

Supports: Standard HTML elements (button, input, select, etc.)

Perfect for: Custom components, HTML-based UI libraries, or when you need basic element interaction

🤷 Not Sure Which to Choose?​

Start Simple​

# If you're just getting started
pnpm add @atomic-testing/react-18 @atomic-testing/component-driver-html

You can always add more packages later. HTML drivers work with any components.

Decision Tree​

  1. What's your primary framework?

    • React → @atomic-testing/react-18
    • Vue → @atomic-testing/vue-3
    • Multiple/E2E → @atomic-testing/playwright

  2. What UI library do you use?

    • Material-UI → @atomic-testing/component-driver-mui-v7
    • Custom/HTML → @atomic-testing/component-driver-html
    • Bootstrap/Other → Start with HTML drivers, build custom as needed

  3. What's your testing strategy?

    • Fast unit tests → DOM testing packages
    • Integration tests → Add Playwright
    • Both → Install both!

🚀 Ready to Start?​

🏗️ Build Your First Test

Now that you know which packages to install, let's build a complete test together.

Start Tutorial →

📚 Framework-Specific Guides

Deep dive into React, Vue, or Playwright specific patterns and best practices.

Framework Guides →

💡 Pro Tips​

  • Start with DOM testing - It's faster and easier to debug
  • Add E2E tests gradually - Focus on critical user journeys
  • Mix component drivers - Use HTML + MUI drivers in the same project
  • Upgrade incrementally - You can migrate from v6 to v7 drivers over time