Testing

latest

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

Theme component

Make sure that you are wrapping your tests with the Theme component. The Theme component is the top level container for Arc, and it is needed by all of the components so they can render correctly. The Modal component for example, won't render correctly if the Theme 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.