reactjs - 使用 React 测试库模拟 iframe 的内容

Question

我有一个 React 组件，它返回一个 iframe 并处理向 iframe 发送消息和从 iframe 接收消息。我完全困惑于如何模拟 iframe 并使用 React 测试库模拟在 iframe 中发布的消息。任何想法或例子都会非常有帮助。

组件:

const ContextualHelpClient: React.VFC<CHCProps> = ({ onAction, data }) => {
  const [iframe, setIframe] = React.useState<HTMLIFrameElement | null>(null);

  const handleMessage = React.useCallback((event: MessageEvent<ContextualHelpAction>) => {
    onAction(event.data);
  }, [onAction])

  const contentWindow = iframe?.contentWindow;

  React.useEffect(() => {
    if (contentWindow) {
      contentWindow.addEventListener('message', handleMessage);
      return () => contentWindow.removeEventListener('message', handleMessage);
    }
  }, [handleMessage, contentWindow]);

  React.useEffect(() => {
    if (contentWindow) {
      contentWindow.postMessage({ type: CONTEXTUAL_HELP_CLIENT_DATA, data }, "/");
    }
  }, [data, contentWindow]);

  return <iframe src={IFRAME_SOURCE} width={300} height={300} ref={setIframe} title={IFRAME_TITLE} />;
};

测试:

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import ContextualHelpClient from '../ContextualHelpClient';
import { IFRAME_SOURCE, IFRAME_TITLE } from '../constants';

describe('<ContextualHelpClient />', () => {
  it('should call onAction when a message is posted', () => {
    const handleAction = jest.fn();
    const content = render(<ContextualHelpClient onAction={handleAction} />);
    const iframe = content.getByTitle(IFRAME_TITLE);
    fireEvent(iframe.contentWindow, new MessageEvent('data'));
    expect(handleAction).toBeCalled(); // fails
  });
});

Answer 1

就我而言，在 fireEvent 上使用 message 类型足以测试这一点。

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import ContextualHelpClient from '../ContextualHelpClient';
import { IFRAME_SOURCE, IFRAME_TITLE } from '../constants';

describe('<ContextualHelpClient />', () => {
  it('should call onAction when a message is posted', () => {
    const handleAction = jest.fn();
    const content = render(<ContextualHelpClient onAction={handleAction} />);
    const iframe = content.getByTitle(IFRAME_TITLE);
    fireEvent(
      window,
      new MessageEvent('message', {origin:  window.location.origin}),
      );
    expect(handleAction).toBeCalled(); // fails
  });
});