Функциональные тесты Jasmine с React

Может ли кто-нибудь объяснить, как правильно интегрировать средство запуска тестов Jasmine в приложение React (без добавления Karma)? Я развертываю свои тестовые примеры на телевизоре и запускаю на нем автономную программу запуска спецификаций. Мне пришлось встроить и транспилировать JS, и здесь у меня возникли проблемы. В итоге я вручную объединил файлы jasmine.js jasmine-html.js и boot.js в файл jasmine-all.js и вставил вызов для определения jasmineRequire следующим образом:

jasmineRequire = getJasmineRequireObj();

Это было прямо перед встраиванием jasmine-html.js. Затем я добавил фрагмент в свой корневой компонент React, чтобы загрузить все это так:

  componentDidMount() {
   import('./jasmine/lib/jasmine-3.2.1/jasmine-all')
     .then(() => {return import('./spec/MyAppSpec');});
  }

Здесь я использую динамический импорт, чтобы гарантировать порядок выполнения. Идея состоит в том, чтобы позволить приложению загружаться, затем загрузить средство запуска тестов, а затем, наконец, загрузить тесты функциональный, которые проверяют приложение в целом. Эти тесты будут отправлять ключевые события и ввод в приложение, как если бы оно было конечным пользователем.

Я знаю, что есть более простой способ сделать это, но я не мог этого понять. Я хочу сделать это правильно, чтобы я мог должным образом включать любые вспомогательные файлы спецификаций, которые я сейчас импортирую непосредственно в свои файлы спецификаций. Любое руководство приветствуется!

Я не уверен, какой смысл делать импорт в componentDidMount. Это спецификация, которая должна создавать экземпляр компонента, а не наоборот. Я использую динамический импорт, чтобы гарантировать порядок выполнения - нельзя. Компоненты могут измениться после установки. Они могут быть асинхронными, и не будет никаких обещаний для цепочки. Вы можете закончить с неуклюжими setTimeouts кое-где в спецификациях. Я бы посоветовал не использовать инструменты для работы, для которой они не предназначены. Какой-нибудь фреймворк e2e, например Testcafe, подойдет больше. Если вы хотите проверить, как работает все приложение React, просто протестируйте его, как любое другое приложение JS.

Estus Flask 26.10.2018 08:38

Я не создаю экземпляры компонентов из спецификаций. Это функциональные тесты, предназначенные для запуска после загрузки всего приложения, поскольку они тестируют приложение как единый блок черного ящика.

Cliff 26.10.2018 19:12

Также мне нужно убедиться, что спецификации не выполняются до загрузки средства запуска тестов. Это намерение моего использования динамического импорта. Я импортирую средство запуска тестов, затем загружаю / запускаю свои спецификации. Я обновил свой вопрос, чтобы еще раз подчеркнуть, что это функциональные тесты, если это не ясно из названия.

Cliff 26.10.2018 19:13

Похоже, я правильно понял дело. Как я уже сказал, вы выбрали неправильный инструмент. Фреймворки E2e имеют определенные функции для тестирования черного ящика, например подождите, пока появится элемент DOM и т. д., независимо от асинхронных процессов под капотом. Жасмин имеет функциональность только для модульных тестов. Там можно заставить работать тесты e2e, но вам нужно будет написать эту функциональность с нуля, то есть написать набор вспомогательных функций, предназначенных для E2E (фреймворк Protractor E2E основан на Jasmine, IIRC).

Estus Flask 26.10.2018 19:29

Спасибо, я понимаю, о чем вы говорите. Чтобы прояснить, я изучил различные фреймворки e2e и, к сожалению, многие из этих проблем представляют собой проблемы для платформы, на которой я разрабатываю. Я нацелен на телевизоры Tizen 2.x, к которым у меня ограниченный доступ. Для многих из этих инструментов потребуется root-доступ и / или дополнительные двоичные файлы для облегчения инструментария. Я использую Жасмин как средство автоматизации для бедняков, что я делал в прошлом на Android.

Cliff 26.10.2018 19:51

Раньше я использовал Jasmine для функциональных тестов, но никогда не использовал веб-приложение React. Я думаю, что есть лучший способ правильно включить средство запуска тестов через зависимость npm без того кладжа, который я использую. Я в основном скачал автономный раннер. файлы и объединили их вместе, но есть ли лучший рецепт для запуска тестовой программы поверх моего приложения реакции?

Cliff 26.10.2018 19:54

Фреймворки E2E не обязательно должны запускать Node на том же устройстве, которое вы тестируете, иначе вы не сможете, например, протестировать iOS. Похоже, вы изобретаете велосипед. Предлагаю проверить Testcafe. Вы запускаете testcafe remote локально, а затем подключаетесь к указанному URL-адресу на своем устройстве. Что касается функциональных (e2e) тестов в Jasmine, то в React все не отличается. Идея с загрузкой Jasmine в componentDidMount кажется очень неправильной. Я ожидал, что вы выполните render(<App/>, rootElement) в тесте Jasmine, добавите значительный тайм-аут и подтвердите DOM. Приведу пример, но считаю это тупиком.

Estus Flask 26.10.2018 21:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
7
225
1

Ответы 1

Нет гарантии, что приложение достигло стабильного состояния в корневом компоненте componentDidMount, даже если все асинхронные операции, такие как запросы API, заглушены. Это должно быть сделано в обратном порядке, т.е. приложение инициализируется внутри тестов и ожидает стабилизации.

В Jasmine нет встроенного функционала для функционального / E2E-тестирования, его нужно писать с нуля.

Это что-то вроде:

async function waitForElement(selector, parent = document, timeout = 2000) {
  let isTimeout;

  setTimeout(() => {
    isTimeout = true;
  }, timeout);

  let el;
  while (!(el = parent.querySelector(selector))) {
    if (isTimeout) throw new Error('timeout');
    await new Promise(resolve => setTimeout(resolve, 50));
  }

  return el;
}

const root = document.getElementById('root');
beforeEach(() => {
  ReactDOM.render(<App/>, root);
});

afterEach(() => {
  ReactDOM.unmountComponentAtNode(root);
});

it('should have foo child', async () => {
  const foo = await waitForElement('div.foo', root, 5000);
  expect($(foo).text()).toContain('foo text');
});  

Тесты основаны на обещаниях и полагаются на ожидание появления результатов в DOM, поскольку ожидается, что это произойдет асинхронно.

waitForElement предоставляется только для справки, потому что его будет недостаточно для реального тестирования E2E; потребуются расширенные селекторы, которые не поддерживаются querySelector (можно улучшить с помощью jQuery) или настраиваемая функция предиката.

Это функциональность, которую, как ожидается, будут иметь фреймворки E2E, такие как TestCafe и Protractor, доступность этой функциональности отличает их от фреймворков, предназначенных для модульного тестирования. Например. TestCafe имеет многоразовые и объединяемые в цепочки селекторы, который может неявно обрабатываться в местах, ожидающих элемента.

Спасибо, я вижу, куда вы собираетесь. Я думал, что моя непосредственная проблема заключается в правильной загрузке жасмина через импорт, но вы указываете, что в конечном итоге я столкнусь с проблемами синхронизации, поскольку некоторые элементы не гарантируются, когда срабатывает componentDidMount(). Я посмотрю на testcafe, поскольку похоже, что это позволяет мне обойти мое непосредственное ограничение на запуск веб-драйвера на устройстве.

Cliff 29.10.2018 18:55
В конечном итоге я бы столкнулся с проблемами синхронизации, поскольку некоторые элементы не гарантированно доступны - это правильно, это проблема, которую должны решать тесты черного ящика.
Estus Flask 29.10.2018 19:02

По-прежнему будет сложно понять, как заставить testcafe автоматизировать мое приложение для реагирования на ТВ, поскольку это не то же самое, что запуск браузера. «Страница», которую мне нужно загрузить, - это index.js в контексте пакета приложений. Мне каким-то образом приходится заставлять телевизор запускать приложение, а не загружать страницу. Есть ли в testcafe тестовый HTML-код, который я могу связать с вызовами бегуна?

Cliff 29.10.2018 19:13

Далее для удаленного тестирования: devexpress.github.io/testcafe/documentation/recipes/… Похоже, я могу заставить свое удаленное устройство открывать URL-адрес в локальной сети, но тогда это приведет к выходу из моего app и запуску веб-браузера. Мне нужно загружать / тестировать страницы в моем приложении, а не запускать браузер, что может быть проблемой.

Cliff 29.10.2018 19:22

Поддерживает ли приложение перенаправление с location.href? Скорее всего, вам понадобится какое-то фиктивное приложение для запуска тестов. Описываемый вами сценарий кажется нетривиальным для любого фреймворка.

Estus Flask 29.10.2018 20:01

Да, использование location.href также открывает веб-браузер. Я собираюсь продолжить возиться с этим. Спасибо за советы! :)

Cliff 30.10.2018 00:36

Просто забыл про npmjs.com/package/react-testing-library. Он не привязан к среде тестирования и может использоваться с Jasmine. Поскольку он ориентирован на функциональное тестирование, он уже содержит несколько помощников, таких как waitForElement.

Estus Flask 04.11.2018 16:30

Как раз сейчас возвращаюсь к этой теме. Спасибо за дополнительный совет! Я также проверю библиотеку реагирования-тестирования.

Cliff 21.11.2018 19:20

Другие вопросы по теме