yFiles for HTML Jest Puppeteer Demo

Jest Puppeteer Demo

The Jest Puppeteer demo shows how to use Jest for integration testing a React application that uses yFiles for HTML.

To start the demo and run the integration tests:

  1. Go to the demo's directory demos/testing/jest-puppeteer.
  2. Run npm install.
  3. Start the demo: Run npm run start-test.
  4. Run the integration tests: npm run test:integration.

The demo starts with an empty graph, but graph items can be created interactively. The integration tests test this functionality by simulating node, edge and port creation gestures and verifying that the graph instance actually contains the newly created graph items.

The tests run in a puppeteer environment instead of the default jsdom environment, because yFiles for HTML needs a fully HTML5 compliant browser environment, which jsdom does not provide (in particular, jsdom lacks a complete SVG DOM implementation).

With puppeteer, the tests can run in a full Chrome headless environment instead.

In order to obtain access to the yFiles API, in particular for access to the GraphComponent instance through CanvasComponent#getComponent, this sample introduces an environment variable that causes the application code to expose the yFiles API to the global scope.