Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

И снова обновляю версии в проекте на реакте

Стандартная ситуация – обновляем версии в достаточно большом проекте и начинаем тихо материться. Сколько же успевают обновить и сколько переписать. Фронтенд он такой фронтенд. Обычно я начинаю с самых простых пакетов и не спеша поднимаюсь к основным библиотекам.

babel

babel-preset-latest (или babel-preset-es2015, babel-preset-es2016, и babel-preset-es2017 вместе) – все это теперь деприкейтед. Вместо них просто используем babel-preset-env. Что в принципе не так уж и плохо. Тем более что, теперь просто в настройках указываем какие версии браузеров поддерживаем.

Например, последние две версии всех браезеров, кроме сафари, там начиная с седьмой:

storybook

Storybook уже некоторое время назад обновился до 3-ей версии, но все руки не доходили его проапгрейдить. А все потому что нужно было переписывать часть вещей на новый API. Однако, оказалось, что не так много, ребята подготовили переход и предоставляют инструменты, которые переписывают код. Автоматически правится не все, но достаточно многое.

Ну и дополнительная сложность в настройке препроцессора. Я пользуюсь less-ом и для этого нужно подправить файл конфигурации webpack для storybook:

Плюс к тому перетасовали плагины (addons) и нужно иметь это ввиду. В частности аддон для дополнительной информации @storybook/addon-notes

enzyme

Enzyme переписал подход к конфигурации. Теперь для каждой мажорной версии реакта нужно использовать свою библиотеку адаптера и для тестов нужна конфигурация этого адаптера:

И тут возникает вопрос куда же эту настройку совать, если у меня все тесты бегут на jest’е. В каждый файл что ли импортировать? Конечно нет, этот вариант так себе. Лучше всего импортировать автоматически через настройки фреймворка ваших тестов. В случае с jest’ом делаем вот так:

Да, вам так же понадобиться “raf/polyfill”, для всех полифилов. Подробнее про это можно посмотреть вот тут React 16 JavaScript Environment.md

По поводу самих тестов – придется немного допилить напильником. Во-первых, в снапшотах теперь будет сохраняться “key” для списков. Во-вторых, как-то странно теперь работает симуляция событий. Пока еще не разобрался в чем проблема, возможно нужен патч, который еще не выпустили. В общем будьте готовы к неожиданностям.

Поделиться:
comments powered by Disqus