Недавно я работал на необычном и несколько анахронистическом требовании, представив форму маркетинга/продажи, используя IFRAME. внутри React.js Приложение с бесшовным UX для загрузки. Интеграция использует PostMessage Для коммуникации с перекрестной страницей, который доказал интересную проблему для тестирования подразделения.
Удаленный пример ниже демонстрирует использование реагирования Функциональный компонент и а Обратный вызов Ref Отказ Компонент отправляет сообщение на страницу в Iframe после его загрузки.
function IframeComponent({ domain, path }) { let iframeRef; const post = (msg) => iframeRef.contentWindow.postMessage(JSON.stringify(msg), domain); const onIframeLoad = () => post({foo:'bar'}); const getRef = (el) => iframeRef = el; return ( ); }
Я хотел проверить поведение нагрузки без необходимости загружать содержимое iFrame, мое решение (после того, как многие копаются в Интернете) было использование тестового двойного для iFrame, набирая доступ, и вызывая обратный вызов.
Тест ниже написан с Моча , Чай , Фермент и Синон
describe('IframeComponent', () => { it('should invoke load message correctly', () => { const domain = 'https://my.domain.com'; const wrapper = shallow(); const iframe = wrapper.find('iframe'); const spy = mockIframePostMessage(iframe); const props = iframe.props(); expect(props.src).to.be.equal(domain + path); expect(spy.called).to.be.equal(false); iframe.simulate('load'); expect(spy.called).to.be.equal(true); expect(spy.args[0][0]).to.be.equal(JSON.stringify({ foo: 'bar' })); expect(spy.args[0][1]).to.be.equal(domain); }); });
А ниже показывает, как, используя фермент, мы можем найти IFrame React Node и вызывать свой обратный вызов, предоставляя простую тестовую двойную.
function mockIframePostMessage(iframe) { const postMessage = sinon.spy(); const iframeMock = { contentWindow: { postMessage, }, }; iframe.getNode().ref(iframeMock); return postMessage; }
Примечание: я верю getnode
Сейчас был заменен Полученность
В последней версии фермента.
Этот подход предоставляет хороший, простой способ написать быстрые тесты для Iframes в React 🚀
Оригинал: “https://dev.to/jamescryer/testing-iframes-in-react-with-enzyme-31pe”