Testing

latest

When testing and app that uses Arc components, there are a couple of prerequisites.

Base component

Make sure that you are wrapping your tests with the Base component. The Base component is the top level container for Arc, and it is used by some of the components for portals. The Modal component for example, won't render if the Base component is missing, and you're tests will fail. You can do this for each test, although its probably best to use a custom wrapper to save repetition.

React Test Library - custom render

Mocks

Some of our components are using features not available in jest-dom. To ensure you can test your components, make sure that the following is present in your setup file.

class MockPointerEvent extends Event {
  button;
  ctrlKey;
  pointerType;
  hasPointerCapture;

  constructor(type, props) {
    super(type, props);
    this.button = props.button || 0;
    this.ctrlKey = props.ctrlKey || false;
    this.pointerType = props.pointerType || "mouse";
  }
}

window.PointerEvent = MockPointerEvent;
window.HTMLElement.prototype.scrollIntoView = jest.fn();
window.HTMLElement.prototype.releasePointerCapture = jest.fn();
window.HTMLElement.prototype.hasPointerCapture = jest.fn();

global.ResizeObserver = require("resize-observer-polyfill");

You'll also need to install resize-observer-polyfill.