Если вы похожи на меня и любите создавать приложения, используя как можно меньше библиотек из-за вашей неутолимой любви и страсти к чистому Javascript, но хотите тщательно протестировать код; Я могу помочь. К сожалению, если вы читаете это, у вас, вероятно, были трудности с настройкой Test-Driven-Development (TDD) для проектов, которые напрямую взаимодействуют с окном или объектами документа. (Т.е. создание элементов, добавление прослушивателей событий и т. д.)
Что ж, позвольте мне быстро перемотать вас через мои усилия по настройке такой среды, выполнив следующие простые шаги:
.1 Настройка узла:
Если в вашем браузерном приложении еще не установлен Node, вы можете сделать это, загрузив его здесь. Node часто используется в качестве сервера Javascript (среди прочего), но TDD используется для запуска тестов и установки инструментов тестирования через NPM (Node Package Manager).
Чтобы инициализировать Node в своем проекте: сначала перейдите к нему в интерфейсе командной строки, введите следующую команду и следуйте инструкциям:
инициализация нпм
.2 Установите Babel, Jest и Window:
Эти зависимости не будут использоваться в вашей производственной среде, они просто необходимы для импорта кода браузера в Node, выполнения тестов и имитации объектов Window, Document без открытия браузера.
Перейдя в каталог проектов через CLI, введите следующую команду:
npm i babel-jest babel-core@^7.0.0-bridge.0 @babel/core @babel/preset-env jest окно
Примечание. Требуются все четыре подключаемых модуля Babel.
.3 Настройте Babel:
В каталоге вашего проекта создайте файл .babelrc и добавьте следующее содержимое:
{
«пресеты»: [«@babel/preset-env»]
}
.4 Настройте Jest:
В файле package.json (который был создан с помощью npm init) добавьте следующий ключ/значение:
«шутка»: {
«setupTestFrameworkScriptFile»: «‹rootDir›/tests/~environment.js»
}
Примечание. ‹rootDir› — это синтаксис, распознаваемый Jest, его не нужно изменять. Однако вам следует создать каталог tests или изменить указанный выше путь.
.5 Включение окна и документа:
Чтобы получить доступ к окну или объектам документа в вашем проекте, мы собираемся использовать модуль Window NPM для имитации DOM (поскольку Node не имеет доступа ко многим API-интерфейсам браузера).
Сначала создайте файл ~environment.js в каталоге tests и добавьте следующее содержимое:
const Window = require('window')
global.window = new Window()
global.document = window.document
Примечание. Если вы используете такие API, как localStorage или fetch, вам также потребуется добавить их в глобальный объект или в исходный код, используйте окно (например, window.localStorage).
Чтобы включить глобальное локальное хранилище, добавьте:
global.localStorage = окно.localStorage
Чтобы включить выборку в Node, вам необходимо установить реализацию выборки. Для этого введите в CLI:
npm я извлекаю узел
Затем добавьте следующую строку в файл ~environment.js:
global.fetch = требуется («выборка узла»)
.6 Образец файла и тест:
Теперь, когда ваша среда настроена, давайте создадим тест, а затем файл для теста:
Создайте в своем каталоге тестов: testFunctionFile.spec.js
Примечание. Jest автоматически настраивается для обнаружения тестовых файлов по их имени *.spec.js.
импортировать testFunction из ‘../src/testFunction.js’
test('Должен переписать HTML-код тела, чтобы он был равен «hello world!»', () =› {
testFunction()
expect(document.body.innerHTML).toEqual('hello world!')
})
Теперь создайте файл, который мы тестируем, в каталоге src (создайте, если это еще не сделано) и создайте файл с именем testFunction.js со следующим содержимым:
function testFunction () {
document.body.innerHTML = ‘привет, мир!’
}
экспортировать testFunction по умолчанию
.7 Запустить тест:
Есть несколько способов запустить тесты:
Вы можете запустить следующую команду:
npx шутка
Вы можете добавить тестовый скрипт в свой файл package.json:
«сценарии»: {
«тест»: «шутка»
}
а затем запустите:
нпм-тест
В любом случае, ваш тест должен пройти! Прекрасная работа! Я надеюсь, что это руководство было полезным для вашего Javascript. Я предлагаю прочитать больше о фреймворке Jest, если вы незнакомы; пригодятся такие вещи, как фиктивные функции 👍🏻. Если вы не знакомы с модулями ES (I.E. Import/Export), пожалуйста, продолжайте читать.
Модули ЕС:
Когда я впервые попытался реализовать свой код с помощью модулей ES, я столкнулся с различными трудностями. Но это всего лишь несколько способов заставить ваш код браузера работать с ними.
Чтобы работать с вашими тегами ‹script /›, вы должны добавить type="module":
// Пример
‹script src="some/src/to/file.js" type="module"›‹/script›
Если строгий режим, совместимость с браузером или функции, не являющиеся глобальными, являются проблемами, вы можете вместо этого использовать упаковщик, такой как parcelJS или webpack, который скомпилирует ваш код во что-то более дружественное для браузера без ограничений/проблем совместимости модуля ES.
