How to mock PerformanceObserver with Jest

Viewed 704

I have some code where I am creating a PerformanceObserver in a constructor and I am trying to figure out how to mock it so I can assert both that observe is being called on the observer, and also emulate a performance entry being generated, which would cause the callback to be called, and assert that the callback was in fact called. The code in the constructor looks like this:

    const { _tracking } = props;

    this.resourceObserver = new PerformanceObserver((list) => {
      const resourceEntries = list.getEntriesByType(
        'resource',
      ) as PerformanceResourceTiming[];

      for (const resource of resourceEntries) {
        resourceObserverCallback(_tracking, resource);
      }
      performance.clearResourceTimings();
    });
    this.resourceObserver.observe({ entryTypes: ['resource'] });

Does anyone have any suggestions?

EDIT:

I can assert that observe is called on the observer by creating a createResourceObserver function that either returns a passed-in mock or a real PerformanceObserver, which solves part of the problem, but I'm still not sure how to exercise the observer in a test.

Here's what the function looks like:

createResourceObserver() {
    const { _mockObserver, _tracking } = this.props;

    if (_mockObserver) {
      return _mockObserver;
    }

    const observer = new PerformanceObserver((list) => {
      const resourceEntries = list.getEntriesByType(
        'resource',
      ) as PerformanceResourceTiming[];

      for (const resource of resourceEntries) {
        resourceObserverCallback(_tracking, resource);
      }
      performance.clearResourceTimings();
    });
    return observer;
  }
0 Answers
Related