Использование enzyme с JSDOM

JSDOM — это бессерверный браузер на JavaScript, который можно использовать для создания реалистичной тестовой среды.

Поскольку API mount enzyme требует DOM, JSDOM необходим для использования mount в случае, если вы не работаете в среде браузера (например, в среде Node).

Для наилучшей работы с enzyme рекомендуется загрузить документ в глобальную область видимости до первого требования React. Очень важно, чтобы скрипт ниже был выполнен до выполнения кода React.

В результате, самостоятельный скрипт, подобный приведенному ниже, является хорошим подходом:

jsdom v10~:

/* setup.js */

const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
global.requestAnimationFrame = function (callback) {
  return setTimeout(callback, 0);
};
global.cancelAnimationFrame = function (id) {
  clearTimeout(id);
};
copyProps(window, global);

Вот пример использования старого API jsdom также.

jsdom ~<v10:

/* setup.js */

const { jsdom } = require('jsdom');

global.document = jsdom('');
global.window = document.defaultView;
global.navigator = {
  userAgent: 'node.js',
};

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter((prop) => typeof target[prop] === 'undefined')
    .reduce((result, prop) => ({
      ...result,
      [prop]: Object.getOwnPropertyDescriptor(src, prop),
    }), {});
  Object.defineProperties(target, props);
}
copyProps(document.defaultView, global);

`describeWithDOM` API и очистка документа после каждого теста

В предыдущих версиях enzyme существовал публичный describeWithDOM API, который загружал новый документ JSDOM в глобальное пространство имен перед каждым тестом, гарантируя детерминированность тестов и отсутствие побочных эффектов.

Этот подход больше не рекомендуется. Исходный код React делает несколько предположений об окружающей среде, в которой он работает, и одно из них заключается в том, что global.document , найденный во время "требования", будет единственным документом, о котором ему нужно беспокоиться. В результате такой "перезагрузка" вызывает больше проблем, чем решает.

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

JSDOM + Mocha

При тестировании с JSDOM файл setup.js должен быть выполнен перед запуском набора тестов. Если вы используете mocha, это можно сделать из командной строки с помощью параметра --require:

mocha --require setup.js --recursive path/to/test/dir

Совместимость с Node.js

Jsdom требует Node 4 или выше. В результате, если вы хотите использовать его с mount, вам необходимо убедиться, что на вашем компьютере установлен Node 4 или iojs. Если вы застряли на более старой версии Node, вы можете попробовать использовать браузерный инструмент для запуска тестов, такой как Karma.

Переключение между версиями Node

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

Для установки nvm, используйте скрипт curl из http://nvm.sh, а затем:

nvm install 4

Теперь на вашем компьютере будет запущена версия Node 4. Вы можете использовать команду nvm use для переключения между двумя средами:

nvm use 0.12

nvm use 4

Использование enzyme с JSDOM

describeWithDOM API и очистка документа после каждого теста

JSDOM + Mocha

Совместимость с Node.js

Переключение между версиями Node

`describeWithDOM` API и очистка документа после каждого теста