Почему мой тест моментального снимка Jest не генерирует правильный HTML-код для элементов управления Microsoft Fluent UI React?

Question

Я использую Microsoft Fluent UI React. Я хочу использовать тестирование снимков Jest, но кажется, что элементы управления не генерируются должным образом:

SocialMediaInfo.tsx:

import * as React from "react";
import { useEffect, useState } from "react";
import * as FluentUI from "@fluentui/react";
import { ActionButton, IIconProps } from "@fluentui/react";

import { ReactComponent as FacebookLogo } from "assets/icons/facebook-logo.svg";
import { ReactComponent as TwitterLogo } from "assets/icons/twitter-logo.svg";

export const registerIcons = () => {
  FluentUI.registerIcons({
    icons: {
      "facebook-logo": <FacebookLogo />,
      "twitter-logo": <TwitterLogo />,
    },
  });
};

export enum SocialMediaService {
  Other,

  Facebook,
  Instagram,
  Twitter,
}

export interface ISocialMediaInfoProps {
  service: SocialMediaService;
  account: string;
}

export function SocialMediaInfo(props: ISocialMediaInfoProps) {
  const [iconProps, setIconProps] = useState<IIconProps | undefined>(undefined);
  const [uri, setUri] = useState<string | undefined>(undefined);
  const [name, setName] = useState<string | undefined>(undefined);

  useEffect(() => {
    const iconProps = getSocialMediaIconProps(props.service);

    setIconProps(iconProps);
  }, [props.service]);

  useEffect(() => {
    const uri = getSocialMediaUri(props.service, props.account);

    setUri(uri);
  }, [props.service, props.account]);

  useEffect(() => {
    setName(props.account);
  }, [props.account]);

  function getSocialMediaIconProps(service: SocialMediaService): IIconProps | undefined {
    switch (service) {
      case SocialMediaService.Facebook: {
        return { iconName: 'facebook-logo', style: { width: '28px', height: '28px' } };
      }

      case SocialMediaService.Twitter: {
        return { iconName: 'twitter-logo', style: { width: '28px', height: '28px' } };
      }

      case SocialMediaService.Other: {
        return undefined;
      }

      default:
        throw new RangeError('The service enumeration value is out of range.');
    }
  }

  function getSocialMediaUri(service: SocialMediaService, account: string): string | undefined {
    switch (service) {
      case SocialMediaService.Facebook: {
        return `https://www.facebook.com/${account}`;
      }

      case SocialMediaService.Twitter: {
        return `https://www.twitter.com/${account}`;
      }

      case SocialMediaService.Other: {
        return undefined;
      }

      default:
        throw new RangeError('The service enumeration value is out of range.');
    }
  }

  return (
    <ActionButton iconProps={iconProps} href={uri} text={name} />
  );
}

SocialMediaInfo.test.tsx:

import React from 'react';
import renderer from 'react-test-renderer';

import { initializeIcons } from '@uifabric/icons';
import { SocialMediaInfo, SocialMediaService, registerIcons } from 'components';

describe('SocialMediaInfo', () => {
    beforeAll(() => {
        initializeIcons();
        registerIcons();
    })

    it('renders a Facebook link correctly.', () => {
        const html = renderer
            .create(<SocialMediaInfo service={SocialMediaService.Facebook} account='sample' />)
            .toJSON();

        expect(html).toMatchSnapshot();
    });
});

---

Тест показывает следующее:

<button
  className="ms-Button ms-Button--action ms-Button--command root-40"
  data-is-focusable={true}
  onClick={[Function]}
  onKeyDown={[Function]}
  onKeyPress={[Function]}
  onKeyUp={[Function]}
  onMouseDown={[Function]}
  onMouseUp={[Function]}
  type="button"
>
  <span
    className="ms-Button-flexContainer flexContainer-41"
    data-automationid="splitbuttonprimary"
  />

---

Проблема здесь в том, что он не отражает фактический html, поэтому, если я войду и изменю логику, чтобы передать SocialMediaService.Twitterвместо этого он все еще проходит. Кажется, что svg или имя учетной записи не имеют никакого значения в созданном снимке. Я что-то упустил?