Тестирование Iframes в реакции с ферментом

Недавно я работал на необычном и несколько анахронистическом требовании, представив форму маркетинга/продажи, используя 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”