Reblend Testing Library

Simple and complete ReblendJS DOM testing utilities that encourage good testing practices.

Overview

Reblend Testing Library provides lightweight utilities for testing ReblendJS components. It encourages tests that focus on user interactions and DOM output, not implementation details.

Installation

npm install --save-dev reblend-testing-library @testing-library/dom @testing-library/jest-dom

• Requires Node.js >= 20
• Peer dependencies: reblendjs, @testing-library/dom

Usage Example

import { render, fireEvent, screen } from 'reblend-testing-library';
import '@testing-library/jest-dom';

function Counter() {
  const [count, setCount] = Reblend.useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {count ? 'Clicked!' : 'Click the button!'}
    </>
  );
}

test('increments counter', async () => {
  render(<Counter />);
  const button = screen.getByRole('button');
  expect(button).toHaveTextContent('0');
  fireEvent.click(button);
  expect(button).toHaveTextContent('1');
  expect(screen.getByText('Clicked!')).toBeInTheDocument();
});

Features

• Works with ReblendJS components and hooks
• Encourages user-centric testing
• Integrates with @testing-library/dom and @testing-library/jest-dom
• Supports async utilities like waitFor, findBy*, etc.

API

• render(ui, options): Render a ReblendJS component to the DOM
• fireEvent: Simulate user events
• screen: Global queries for DOM elements
• waitFor, waitForElementToBeRemoved: Async utilities for waiting on DOM changes

See the API docs for more details.

Migration from React

• All React/ReactDOM references have been removed
• Use reblendjs and Reblend Testing Library utilities in your tests
• Most React Testing Library patterns are supported, but use ReblendJS components/hooks

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT © Emmanuel Paul Elom

For more examples and advanced usage, see the docs or open an issue if you have questions.