테스트 도우미

npm i -D @freereportjs/testing

// npm i -D @freereportjs/testing vitest jsdom   (vitest.config: test.environment = 'jsdom')
import { beforeAll, expect, it } from 'vitest';
import { createViewer } from '@freereportjs/core';
import { mockLayout, viewerHarness } from '@freereportjs/testing';

// jsdom has no layout: without this nothing scrolls into view and no page is drawn
beforeAll(() => { mockLayout(); });

it('filters by region', async () => {
  const host = document.createElement('div');
  document.body.append(host);
  createViewer(host, { definition, fetchData: p => api.sales(p) });
  const report = viewerHarness(host);
  await report.waitForReady();

  report.setParam('region', '부산');
  report.setParam('from', new Date(2026, 9, 1));
  await report.submitParams();                     // presses 조회 and waits for the pages

  expect(report.text('title')).toBe('부산 매출 보고서');   // element id "title"
  expect(report.rows(['item', 'amount'])[0]).toEqual(['노트북', '1,200,000']);
  expect(report.overflows()).toEqual([]);         // no text cut off
});

import { createDesigner } from '@freereportjs/core';
import { designerHarness, mockLayout } from '@freereportjs/testing';

mockLayout();
const designer = createDesigner(host, { definition, data: { rows } });
const d = designerHarness(host);

d.select('title');                 // element id
d.setProp('글자 크기', 16);         // property by its label (lang: 'en' → 'Font size')
d.setProp('굵게', true);
d.editText('title', '월간 매출');   // double-click, type, Enter
d.select('total', { shift: true });
d.align('right');
d.press('ArrowDown', { shiftKey: true });  // 5 mm down
d.press('z', { ctrlKey: true });           // undo
d.setMode('preview');
await d.preview().waitForReady();
expect(d.preview().text('title')).toBe('월간 매출');

import { expect, test } from '@playwright/test';
import { selectors } from '@freereportjs/testing';
const v = selectors.viewer;

test('sales report', async ({ page }) => {
  await page.goto('/reports/sales');
  await expect(page.locator(v.ready)).toBeVisible();          // the first run is done

  await page.locator(v.paramsToggle).click();
  await page.locator(v.param('region')).selectOption('부산');
  await page.locator(v.paramsSubmit).click();
  await expect(page.locator(v.ready)).toBeVisible();          // busy until the pages are drawn

  await expect(page.locator(v.text('title'))).toHaveText('부산 매출 보고서');
  await expect(page.locator(v.text('amount', 0))).toHaveText('1,200,000');  // first detail row
  await expect(page.locator(v.overflow)).toHaveCount(0);      // no text cut off

  await page.locator(v.button('last')).click();
  const [pdf] = await Promise.all([page.waitForEvent('download'), page.locator(v.button('pdf')).click()]);
  expect(pdf.suggestedFilename()).toMatch(/\.pdf$/);
});

import { selectors } from '@freereportjs/testing';
const v = selectors.viewer;

it('sales report', () => {
  cy.visit('/reports/sales');
  cy.get(v.ready).should('exist');
  cy.get(v.paramsToggle).click();
  cy.get(v.param('region')).select('부산');
  cy.get(v.paramsSubmit).click();
  cy.get(v.ready).should('exist');
  cy.get(v.text('title')).should('have.text', '부산 매출 보고서');
  cy.get(v.overflow).should('not.exist');
});