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

Question

Может кто-нибудь объяснить, как правильно интегрировать Jasmine Test Runner в приложение React (без добавления кармы)?Я развертываю свои тестовые наборы на телевизоре и запускаю автономный тестер спецификаций на съемочной площадке.Я должен был встроить и перенести 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');});
  }

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

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

Answer 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 имеет многоразовые и цепные селекторы , которые могут быть неявно обработаны в местах, ожидающих элемент.