Может ли кто-нибудь объяснить, как правильно интегрировать средство запуска тестов 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');});
}
Здесь я использую динамический импорт, чтобы гарантировать порядок выполнения. Идея состоит в том, чтобы позволить приложению загружаться, затем загрузить средство запуска тестов, а затем, наконец, загрузить тесты функциональный, которые проверяют приложение в целом. Эти тесты будут отправлять ключевые события и ввод в приложение, как если бы оно было конечным пользователем.
Я знаю, что есть более простой способ сделать это, но я не мог этого понять. Я хочу сделать это правильно, чтобы я мог должным образом включать любые вспомогательные файлы спецификаций, которые я сейчас импортирую непосредственно в свои файлы спецификаций. Любое руководство приветствуется!
Я не создаю экземпляры компонентов из спецификаций. Это функциональные тесты, предназначенные для запуска после загрузки всего приложения, поскольку они тестируют приложение как единый блок черного ящика.
Также мне нужно убедиться, что спецификации не выполняются до загрузки средства запуска тестов. Это намерение моего использования динамического импорта. Я импортирую средство запуска тестов, затем загружаю / запускаю свои спецификации. Я обновил свой вопрос, чтобы еще раз подчеркнуть, что это функциональные тесты, если это не ясно из названия.
Похоже, я правильно понял дело. Как я уже сказал, вы выбрали неправильный инструмент. Фреймворки E2e имеют определенные функции для тестирования черного ящика, например подождите, пока появится элемент DOM и т. д., независимо от асинхронных процессов под капотом. Жасмин имеет функциональность только для модульных тестов. Там можно заставить работать тесты e2e, но вам нужно будет написать эту функциональность с нуля, то есть написать набор вспомогательных функций, предназначенных для E2E (фреймворк Protractor E2E основан на Jasmine, IIRC).
Спасибо, я понимаю, о чем вы говорите. Чтобы прояснить, я изучил различные фреймворки e2e и, к сожалению, многие из этих проблем представляют собой проблемы для платформы, на которой я разрабатываю. Я нацелен на телевизоры Tizen 2.x, к которым у меня ограниченный доступ. Для многих из этих инструментов потребуется root-доступ и / или дополнительные двоичные файлы для облегчения инструментария. Я использую Жасмин как средство автоматизации для бедняков, что я делал в прошлом на Android.
Раньше я использовал Jasmine для функциональных тестов, но никогда не использовал веб-приложение React. Я думаю, что есть лучший способ правильно включить средство запуска тестов через зависимость npm без того кладжа, который я использую. Я в основном скачал автономный раннер. файлы и объединили их вместе, но есть ли лучший рецепт для запуска тестовой программы поверх моего приложения реакции?
Фреймворки E2E не обязательно должны запускать Node на том же устройстве, которое вы тестируете, иначе вы не сможете, например, протестировать iOS. Похоже, вы изобретаете велосипед. Предлагаю проверить Testcafe. Вы запускаете testcafe remote
локально, а затем подключаетесь к указанному URL-адресу на своем устройстве. Что касается функциональных (e2e) тестов в Jasmine, то в React все не отличается. Идея с загрузкой Jasmine в componentDidMount кажется очень неправильной. Я ожидал, что вы выполните render(<App/>, rootElement)
в тесте Jasmine, добавите значительный тайм-аут и подтвердите DOM. Приведу пример, но считаю это тупиком.
Нет гарантии, что приложение достигло стабильного состояния в корневом компоненте 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, поскольку похоже, что это позволяет мне обойти мое непосредственное ограничение на запуск веб-драйвера на устройстве.
По-прежнему будет сложно понять, как заставить testcafe автоматизировать мое приложение для реагирования на ТВ, поскольку это не то же самое, что запуск браузера. «Страница», которую мне нужно загрузить, - это index.js в контексте пакета приложений. Мне каким-то образом приходится заставлять телевизор запускать приложение, а не загружать страницу. Есть ли в testcafe тестовый HTML-код, который я могу связать с вызовами бегуна?
Далее для удаленного тестирования: devexpress.github.io/testcafe/documentation/recipes/… Похоже, я могу заставить свое удаленное устройство открывать URL-адрес в локальной сети, но тогда это приведет к выходу из моего app
и запуску веб-браузера. Мне нужно загружать / тестировать страницы в моем приложении, а не запускать браузер, что может быть проблемой.
Поддерживает ли приложение перенаправление с location.href
? Скорее всего, вам понадобится какое-то фиктивное приложение для запуска тестов. Описываемый вами сценарий кажется нетривиальным для любого фреймворка.
Да, использование location.href также открывает веб-браузер. Я собираюсь продолжить возиться с этим. Спасибо за советы! :)
Просто забыл про npmjs.com/package/react-testing-library. Он не привязан к среде тестирования и может использоваться с Jasmine. Поскольку он ориентирован на функциональное тестирование, он уже содержит несколько помощников, таких как waitForElement.
Как раз сейчас возвращаюсь к этой теме. Спасибо за дополнительный совет! Я также проверю библиотеку реагирования-тестирования.
Я не уверен, какой смысл делать импорт в
componentDidMount
. Это спецификация, которая должна создавать экземпляр компонента, а не наоборот. Я использую динамический импорт, чтобы гарантировать порядок выполнения - нельзя. Компоненты могут измениться после установки. Они могут быть асинхронными, и не будет никаких обещаний для цепочки. Вы можете закончить с неуклюжими setTimeouts кое-где в спецификациях. Я бы посоветовал не использовать инструменты для работы, для которой они не предназначены. Какой-нибудь фреймворк e2e, например Testcafe, подойдет больше. Если вы хотите проверить, как работает все приложение React, просто протестируйте его, как любое другое приложение JS.