Basic test with Jest-Image-Snapshot

bpmn.rendering.test.ts

// jest-image-snapshot custom configuration
function getConfig () {
  return {
    diffDirection: 'vertical',
    // useful on CI (no need to retrieve the diff image, copy/paste image content from logs)
    dumpDiffToConsole: true,       
    // use SSIM to limit false positive
    // https://github.com/americanexpress/jest-image-snapshot#recommendations-when-using-ssim-comparison
    comparisonMethod: 'ssim',
  };
}

it(`no BPMN Gateway visual regression`, async () => {
  // Redirect the current page in the browser to a new url with puppeteer
  const response = await page.goto(‘http://localhost:10002/non-regression.html?bpmn=./gateways.bpmn’);

  // Be sure the page is displayed correctly with puppeteer & Jest
  expect(response.status()).toBe(200);
  await expect(page.title()).resolves.toMatch('BPMN Visualization Non Regression' );
  await page.waitForSelector(‘#bpmn-container’,  { timeout: 5_000 });

  // Take the screenshot of the page with puppeteer
  const image = await page.screenshot({ fullPage: true });

  // Compare the taken screenshot with the baseline screenshot (if exists), or create it (else)
  const config = getConfig();
  expect(image).toMatchImageSnapshot(config);
});