RFC: Exporting hook with testable snippet

[charlieforward9]

I would like to test my components using this react hook. I need some help writing the tests for this library because I still dont seem to understand testing as well as I want to. Any feedback would be very helpful, a minimal test sample here would be best. I am using vitest as my test environment, but would be happy to accept a jest solution and resolve it myself. The test should include an example of mocking the click handler, and expecting a popup.

//@ts-expect-error glify types are not yet available
import glify from "leaflet.glify";
import { useEffect, useRef } from "react";
import { LeafletMouseEvent } from "leaflet";
import { useMap } from "react-leaflet/hooks";

interface IColor {
  r: number;
  g: number;
  b: number;
  a?: number;
}

interface IGlifyLayerOptions {
  size?: number | ((index: number, point: [number, number]) => number);
  color?: IColor | ((index: number, point: GeoJSON.Feature) => IColor);
  opacity?: number;
  className?: string;
  sensitivity?: number;
  weight?: number | ((index: number, feature: GeoJSON.Feature) => number);
  border?: boolean;
  borderOpacity?: number;
  vertexShaderSource?: string;
  fragmentShaderSource?: string;
  pane?: string;
  preserveDrawingBuffer?: boolean;
  click?: (event: LeafletMouseEvent, feature: GeoJSON.Feature) => void;
  contextMenu?: (event: LeafletMouseEvent, feature: GeoJSON.Feature) => void;
  hover?: (event: LeafletMouseEvent, feature: GeoJSON.Feature) => void;
  hoverOff?: (event: LeafletMouseEvent, feature: GeoJSON.Feature) => void;
}

export const useGlify = (
  type: "points" | "lines" | "shapes",
  data: [number, number][] | GeoJSON.FeatureCollection | undefined,
  settings: IGlifyLayerOptions, //without map or data
  layer: { visible: boolean; opacity: number } | undefined,
  lonFirst: boolean = true,
) => {
  const map = useMap();
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const glRef = useRef<any | null>(null);
  useEffect(() => {
    if (lonFirst) {
      glify.longitudeFirst();
    } else {
      glify.latitudeFirst();
    }
    glRef.current = glify[type]({
      map,
      data,
      ...settings,
    });

    return () => {
      glRef.current.remove();
    };
  }, []);

  useEffect(() => {
    if (!glRef.current) return;
    glRef.current.settings.data = !layer?.visible
      ? {
          type: "FeatureCollection" as const,
          features: [],
        }
      : data;
    glRef.current.render();
  }, [data, layer?.visible]);

  useEffect(() => {
    if (!glRef.current) return;
    if (lonFirst) {
      glify.longitudeFirst();
    } else {
      glify.latitudeFirst();
    }
    glRef.current.settings.opacity = layer?.opacity ?? 0;
    glRef.current.render();
  }, [layer?.opacity]);

  return glRef;
};

[charlieforward9]

I am going to try writing browser based tests to make it a little easier using Vitest.

[charlieforward9]

With #171, and an abundance of issues with the above snippet, this is no longer relevant or recommended.