How to use the @stylable/dom-test-kit.StylableDOMUtilCompat function in @stylable/dom-test-kit

export const headingDriverFactory = (factoryParams: ComponentFactory): HeadingDriver => {
  const coreTextDriver = textDriverFactory(factoryParams);
  const stylableDOMUtil = new StylableDOMUtilCompat(style);
  const { element } = factoryParams;

  return {
    ...coreTextDriver,
    getAppearance: () => stylableDOMUtil.getStyleState(element, 'appearance') as Appearance,
    isLight: () => stylableDOMUtil.hasStyleState(element, 'light'),
  };
};

export const textDriverFactory: DriverFactory = ({element}) => {
  const stylableDOMUtil = new StylableDOMUtilCompat(style);

  return {
    /** check if element exists */
    exists: () => !!element,
    /** check if component has ellipsis */
    hasEllipsis: () => stylableDOMUtil.hasStyleState(element, 'ellipsis'),
    /** check if element has title attribute */
    hasTitleAttribute: () => element.getAttribute('title') !== null,
    /** check if element has title attribute */
    getTitle: () => (element as HTMLElement).title,
    /** get the rendered tag name */
    getTagName: () => element.tagName.toLowerCase(),
    /** get the rendered content */
    getText: () => element.innerHTML
  };
};

export const badgeDriverFactory = (factoryParams: ComponentFactory): BadgeDriver => {
  const { element, eventTrigger } = factoryParams;
  const stylableDOMUtil = new StylableDOMUtilCompat(style, element);

  return {
    /** checks if element exists */
    exists: () => !!element,
    /** returns elements innerHtml */
    getContent: () => element.innerHTML,
    /** returns elements text */
    text: () => element.textContent,
    getType: () => stylableDOMUtil.getStyleState(element, 'type') as Type,
    getSkin: () => stylableDOMUtil.getStyleState(element, 'skin') as Skin,
    getSize: () => stylableDOMUtil.getStyleState(element, 'size') as Size,
    isUppercase: () => stylableDOMUtil.getStyleState(element, 'uppercase') === 'true',
    hasClickCursor: () => stylableDOMUtil.getStyleState(element, 'clickable') === 'true',
    getPrefixIcon: () => stylableDOMUtil.select('.prefix'),
    getSuffixIcon: () => stylableDOMUtil.select('.suffix'),
    click: () => eventTrigger.click(element)