XBell

A modern web testing framework that seamlessly combines unit testing, component testing, and end-to-end testing.

Documentation | Getting Started

Features

• Unified Testing API - One framework for unit, component, and E2E testing
• Multi-Environment Support - Freely switch between Node.js and Browser environments in a single test
• Component Testing - First-class support for React, Vue, and more
• Visual Testing - Built-in screenshot comparison and snapshot testing
• TypeScript First - Full TypeScript support out of the box
• Fast & Modern - Built with performance and developer experience in mind

Installation

# npm
npm install xbell

# yarn
yarn add xbell

# pnpm
pnpm add xbell

To enable browser testing, install the browser module:

npx xbell install browser

Quick Start

Unit Testing in Node.js

import { test, expect } from 'xbell';
import { add } from './add';

test('test code in nodejs', () => {
  const result = add(1, 1);
  expect(result).toBe(2);
});

Unit Testing in Browser

import { test } from 'xbell';

test.browser('test code in browser', async ({ expect }) => {
  const { add } = await import('./add');
  const result = add(1, 1);
  expect(result).toBe(2);
});

End-to-End Testing

import { test } from 'xbell';

test('e2e testing', async ({ page, expect }) => {
  await page.goto('https://example.com');
  await expect(page).toMatchScreenshot({
    name: 'homepage',
  });
});

Mixed Environment Testing

Run code in both Node.js and Browser within a single test:

import { test, expect } from 'xbell';

test('mixed environment testing', async ({ page }) => {
  // Execute code in browser
  await page.evaluate(async () => {
    const { add } = await import('./add');
    document.body.innerHTML = `<div>Result: ${add(1, 1)}</div>`;
  });

  // Assert in Node.js
  await expect(page).toMatchScreenshot({
    name: 'result',
  });
});

Documentation

Visit https://x-bell.github.io/xbell for full documentation.

License

XBell is MIT licensed.