Automated visual regression testing with TypeScript, Puppeteer, Jest and Jest Image Snapshot

• bpmn-visualization-js

  18 193 9.5 TypeScript

  A TypeScript library for visualizing process execution data on BPMN diagrams

  

I will use the BPMN Visualization project (version 0.10.0) as an example. (This example has been simplified so it shows more clearly the configuration and features explained in this article.) The goal of this project is to load BPMN content, and render it. Automated visual tests will simplify our life with each refactoring, addition of a new component, update of the positioning algorithm of the different BPMN elements, or update of the MxGraph rendering library.

• jest-image-snapshot

  7 3,776 5.8 JavaScript

  ✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.

  

Github repository of Jest-image-snapshot: https://github.com/americanexpress/jest-image-snapshot

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• puppeteer

  359 86,773 9.9 TypeScript

  Node.js API for Chrome

  

Create a new file (./test/e2e/jest-puppeteer.config.js) for the Puppeteer configuration to run the server & launch the browser once for all tests:

• jest

  474 43,581 9.5 TypeScript

  Delightful JavaScript Testing.

  

Jest + its type definition: A JavaScript Testing Framework Jest is a fully featured testing framework, developed by Facebook. It needs very little configuration and works basically out of the box.

Suggest a related project