React测试库-模拟iFrame onLoad

Question

我有一个组件，在它里面呈现iFrame。我想测试iFrame的onLoad功能，但它不触发简单的测试库的render功能。我可以编程模拟iFrame的onLoad事件与测试库。

Answer 1

我被这个卡住了，使用了:

it('should call the onLoad event'), async () => {
const {container} = render(<MyComponent />)
fireEvent.load(container.querySelector('iframe')
await waitFor(() => expect(yourOnLoadEvent).toHaveBeenCalled()
}

Answer 2

可以。我偶然发现了这个问题，并决定分享我的工作代码。我尝试使用container.querySelector('iframe')，但似乎找不到iframe，所以我采用了使用testid

的方法。

import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { useState } from 'react';
const MyComponent = () => {
const [isLoaded, setIsLoaded] = useState(false);
return (
<div>
<iframe
data-testid="google-iframe"
src="google.com"
title="google"
onLoad={() => setIsLoaded(true)}
/>
{isLoaded && <span>OnLoad Triggered!</span>}
</div>
);
};
function renderComponent() {
render(<MyComponent />);
}
test('Should show the OnLoad message once the iframe has loaded', async () => {
renderComponent();
fireEvent.load(screen.getByTestId('google-iframe')!);
await waitFor(() => {
expect(screen.getByText('OnLoad Triggered!')).toBeInTheDocument();
});
});