@ttoss/test-utils

Testing utilities for Jest with React Testing Library, user events, Relay helpers, faker, and optional ESM transform helpers.

Installation

pnpm add -D @ttoss/test-utils

Entry Points

| Import | What it gives you | Side effects | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------- | | @ttoss/test-utils/react | render, renderHook, userEvent, emotion matchers, jest-dom matchers, ResizeObserver polyfill, snapshot serializer | Yes (extends expect, polyfills) | | @ttoss/test-utils/faker | faker ESM re-export | No | | @ttoss/test-utils/relay | Relay test utilities | No | | @ttoss/test-utils | Utility: getTransformIgnorePatterns (ESM Jest helper) | No |

Future: a lean version without side effects can be added as a distinct entry (e.g. react-core)—current react entry already includes the jsdom-oriented setup.

Quick Start

import { render, screen, userEvent, renderHook } from '@ttoss/test-utils/react';

test('component', async () => {
  const user = userEvent.setup();
  render(<Counter />);
  await user.click(screen.getByText('Increment'));
  expect(screen.getByText('1')).toBeInTheDocument();
});

test('hook', () => {
  const { result } = renderHook(() => useCounter());
  expect(result.current.count).toBe(0);
});

Global Wrapper

import { setOptions } from '@ttoss/test-utils/react';
import AllProviders from './src/AllProviders';

setOptions({ wrapper: AllProviders });

export default {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testEnvironment: 'jsdom',
};

Relay Testing

import {
  createMockEnvironment,
  MockPayloadGenerator,
} from '@ttoss/test-utils/relay';

const environment = createMockEnvironment();

More patterns: Testing Relay Components

Fake Data

import { faker } from '@ttoss/test-utils/faker';

const testUser = {
  name: faker.person.fullName(),
  email: faker.internet.email(),
};

ESM Transform Helper (Jest)

Use getTransformIgnorePatterns to ensure ESM packages like @faker-js/faker are transformed under pnpm layout:

import { getTransformIgnorePatterns } from '@ttoss/test-utils';

const transformIgnorePatterns = getTransformIgnorePatterns({
  esmModules: ['@faker-js/faker'],
});

export default {
  testEnvironment: 'jsdom',
  transformIgnorePatterns,
};

If you see SyntaxError: Cannot use import statement outside a module, add the module name to esmModules.

Features Summary

• React Testing Library (render, renderHook, queries)
• User events (userEvent)
• jest-dom matchers
• Emotion matchers + snapshot serializer
• ResizeObserver polyfill
• Relay test utilities
• Faker ESM helper
• PNPM-aware ESM transform pattern generator

FAQ

Q: Why is getTransformIgnorePatterns separate?
A: It’s a pure configuration helper without runtime side effects; keeping it in the root avoids pulling in DOM matchers unnecessarily.

Q: Do I need to import jest-dom manually?
A: Not when using @ttoss/test-utils/react (it auto-registers).

Q: How do I add another ESM library?
A: Include it in esmModules: getTransformIgnorePatterns({ esmModules: ['@faker-js/faker','some-lib'] }).

Minimal Config Only (No side effects)

If you ever need a lean setup (no global matchers), you can create your own thin adapter by importing directly from @testing-library/react and @testing-library/user-event. Current package focuses on convenience defaults.