Иногда на чужих скриншотах я замечал, что привычные программистам конструкции вроде === и != могут быть отображены одним изящным глифом, вместо трёх разных. А тут наткнулся на то, что у человека такие штуки заработали в SublimeText 3. Стал разбираться как подключить и выяснил:

1. Эти штуки называются лигатурами. И ваш текстовый редактор (или терминал) должен иметь их поддержку. Большинство современных профессиональных инструментов такую поддержку имеют.
2. SublimeText 3 обзавёлся такой поддержкой совсем недавно. С версии 3146
3. Необходимо установить в систему шрифт с поддержой лигатур. Варианты: Fira Code, Monoid, Iosevka и др. В целом их мало.
4. В sublime-е шрифт меняется настройкой font_face.

О остановился на Fira Code. Начертание не привычное, оно отличается от того шрифта, что используется в st3 по умолчанию. Но в целом очень даже ничего. Вот его рекламная брошюрка:

Рецепт не для программистов, но относительно опытных пользователей ПК:

1. Открываем раздел Dictionary (Словарь) на lingualeo
2. Проматываем словарь до упора вниз, чтобы сайт отобразил все слова (он их лениво подгружает)
3. Открываем консоль разработчика (F12 или Ctrl+Shift+I)
4. Выбираем в открывшейся панели таб "Console"
5. Вставляем туда следующую команду: copy(Array.from(document.querySelectorAll('.dict-item-word')).map(el => [el.getAttribute('data-word-value'), el.querySelector('.translates').innerText]))
6. Открываем этот или любой подобный сайт (который умеет конвертировать JSON в нужный вам формат)
7. Вставляем в текстовую область через Ctrl+V (Cmd+V) текст из буфера обмена (в п.5 туда были помещены все слова в формате JSON)
8. Кликаем по ссылке "Download the entire CSV" и сохраняем получившийся файл куда вам нужно (можно пересохранить его в нужный формат, поменять кодировку и пр. (по умолчанию UTF8)).

В случае если разработчики поменяют вёрстку ― п.5 поломается :-) Увы

Случайно наткнулся на то, что можно вынести command line parameters для консольного запуска mocha в отдельный файл test/mocha.opts. Но тут же наткнулся на грабли. Файл должен лежать именно в test/mocha.opts, а у меня директория тестов называлась tests, и этого хватило. Т.е. механизм поиска файла сильно уступает аналогичному для, скажем, .eslintrc или .gitignore. Сам формат файла простой, пример:

--require test/setup.js
--compilers js:babel-core/register

Теперь mocha можно запускать без параметров. Интересная выресовывается картинка, много разных вспомогательных файлов: mocha.opts, .babelrc, .eslintrc, .gitignore, webpack.config.js, README.md, package.json и пр. шушера. А ведь не так давно мне было привычно размещать исходники прямо в корневой директории проекта, теперь же нужно им отдельную директорию создавать.

• Во-первых чтобы они не утонули среди вспомогательных файлов
• Во-вторых т.к. всё равно нужно куда-то итоговую сборку собирать
• В третьих таким образом удобно избегать node_modules (к примеру для поиска по файлам проекта)

Сразу отмечу, что статья не претендует на истину. Это всего лишь мои заметки о том, как вообще можно написать и запустить простые тесты для React, т.к. тут оказалось много места где заблудиться\окопаться. Итак, начнём.

Babel

Раз React значит и JSX, а значит и babel. Но простой запуск mocha просто запускает nodejs, в котором никакого JSX нет (и наверное никогда не будет). Что делать? Поиск подсказывает, что нужно запускать mocha (далее речь идёт именно о mocha) с флагом --compilers js:babel-core/register. Что сие есть? Это флаг заставит mocha предварительно компилировать код используя babel-core/register, который грубо изнасилуетподменяет require() в nodejs, что позволяет ему предварительно изуродоскомпилировать кодовую базу в нормальный javascript. 

Import\Export и .babelrc

Ок, но как babel-ю подсказать, что использовать в качестве конфига? Точного внятного ответа пока дать не могу, но как минимум можно создать в корне json-файл с именем .babelrc, который будет содержать json-конфиг. Мне прокатило, но в более сложных ситуациях нужно будет искать вариант поделикатнее. Собственно, чтобы не дублировать конфиг, имеет смысл подключить его и в webpack.config.js. Сразу отмечу, что взять и распарсить .babelrc как json простым вызовом require() nodejs почему-то не смогла (видимо мешает отсутствие расширения .json), поэтому fs.readFileSync и JSON.parse вам в помощь. 

Полифилы, JSDom и прочая нецензурщина

nodeJS это nodeJS, а не браузер, а для ряда тестов потребуется имитация браузера. И похоже, что на данный момент изящных решений нет, т.к. кодовая база react-* грубо сверяется с глобальным наличием window & document. Мде. Помимо прочего всякие полифилы, вроде regenerator-а (ну или отключить транспайлинг async-await в генераторы ещё до этапа компиляции) нужны. 

Для решения вопроса с полифилами достаточно import 'babel-polyfill'. а вот с JSDom так просто не срастётся. Я воспользовался таким решением:

• import 'jsdom-global/register';
• принудительно зафиксировал jsdom на 8-й версии (а не 10-й)

Замечу, что жизненноважно подключать этот костыль с JSDom до подключения React, иначе груды неадекватных глупых ошибок без внятных описаний украсят вашу безмятежную жизнь. Суть в том, что в недрах разных react-либ window кешируется ещё на этапе подключения файлов. И в последствии какой-нибудь флаг вида canUseDom === false будет вам яростно мешаться.

Можно подключать эти либы в каждом тест-файле, но тогда вы столкнётесь с тем, что при запуске сразу пачки тестов, babel-polifil будет падать со словами "я уже подключён", jsdom тоже будет что-нибудь базлать. Разумная альтернатива вынести обе эти строки в некий setup.js, а потом его подключать флагом --require tests/setup.js.

Сами тесты

React поставляет в пакете react-dom ряд инструментов для тестирования. Но даже на официальной странице этих инструментов упоминается, что вам стоит воспользоваться некой либой под названием enzyme. Установка оказалась не совсем тривиальной, т.к. сильно зависит от версии вашего React-а. Очень внимательно прочитайте инструкции по установке. Заодно доставьте к нему что-нибудь вроде chai для удобства тестирования.

Отмечу, что enzyme предоставляет по сути 3 набора утилит для работы с вашими React компонентами. А именно shallow для быстрого и поверхностного рендеринга, render для работы уже с html, и mount для полноценной работы с DOM и life-cycle React-компонентов. В любых маломальски сложных ситуациях готовьтесь к танцам с бубнами. Например .simulate метод для вызова событий умеет только React-события, а повешанные через addEventListener уже нет. Готовьтесь к нефинормативным ошибкам, куда же без них. 

Примеры кода для тестов можно посмотреть здесь. По правде говоря я, на данный момент, не в восторге ни от самой либы, ни от её документации. 

При попытке подключить mocha к redux-react проекту мне потребовалось вынести конфигурацию для babel в .babelrc файл. Дальше веселее, оказалось, что mocha категорически отказывается запускаться с опцией { modules: false }, а вот без неё пожалуйста. На этом приключения не закончились, оказалось, что cuid не хочет запускаться с ней, а вот без неё пожалуйста. Временно решил разделить конфиги для babel & mocha, перебив эту опцию в webpack-конфиге. Но не тут то было. Экспериментальным путём выяснил, что webpack чихал на указанный вами в файле конфиг, если видит .babelrc. Решительно не понимаю, на кой чёрт так было сделано. Непродолжительный гуглёж привёл меня к тому, что ему нужно насильно запрещать это опцией babelrc: false в query для babel-loader-а.

Эх, web свернул куда-то не туда. Он, не успевши спозтись, уже куда-то расползается. И это я всё ещё не подключил тесты. Там несмотря на следование мануалам у меня пока вообще ничего не заводится. А гляда на рабочие конфиги из github-а я натыкаюсь на такие адовые конструкции по 500+ строк кода, альтернативные настройки babel с какими-то тестовыми preset-ами и пр., что…