reactjs - Jest、Enzyme、React - 测试 Iframe OnLoad

Question

我正在编写一个 React 组件，它将在 iframe 中加载 URL，然后当 iframe 的 onLoad 事件触发时，它将调用 contentWindow.postMessage()。我想使用 Jest、Enzyme 和 JSDOM 来证明此功能。

我的组件包装了react-iframe，看起来非常简单:

export class FilteredIframe extends React.PureComponent<FilteredIframeProps> {
  onload = (e:Window) => {
    console.log("ONLOAD CALLED");
    if (this.props.filters) {
        e.postMessage(this.props.filters, this.props.url);
    }
  }
  render() {
    return (<Iframe url={this.props.url}
        display="initial"
        position="static"
        onLoad={this.onload}
    />);
  }
}

我试图找出如何让 enzyme /jsdom 来测试这个，但我失败了:

test("Posts message once the frame has loaded", async () => {
  const payLoad = { data: "data" };
  const result = mount(<FilteredIframe url="https:///www.bing.com" filters={payLoad}/>);
})

当 Jest 运行这个时，我从未在控制台中看到“ONLOAD CALLED”消息。我需要为 jsdom 或 enzyme 做一些特殊的事情才能使其真正调用 onLoad 吗？

Answer 1

我重新审视了这一点，发现我可以直接调用组件内 iframe 的 onLoad() 。我现在有这样的东西:

test("Posts message once the frame has loaded", async () => {
    const payLoad = { data: "data" };
    const result = mount(<FilteredIframe url="https:///www.bing.com" filters={payLoad} />);
    const iframe = result.find("iframe");

    //mock contentWindow so we can examine messages
    let receivedFilters = {};
    const mockIFrameContents = {
        contentWindow : {
            postMessage: function (filters, url) {
                receivedFilters = filters;
            }
        }
    }
    result.instance().setIframeRef(mockIFrameContents);

    //Signal the contents have loaded
    iframe.props().onLoad();
    expect(receivedFilters === payLoad).toBeTruthy();
});

我还对组件进行了一些修改，以使用 iframe 本身的引用，并使用引用的 contentWindow 而不是事件目标。但这里真正的答案只是模拟 iframe contentWindow 并直接调用它的 onLoad()，而不是尝试让它实际加载某些内容。