React 16 упал несколько дней назад. Наряду со всем его достоинством, поскольку это самый крупный релиз, который команда выпустила до сих пор, было несколько неизбежных проблем с прорезыванием зубов.
requestAnimationFrame Предупреждение
После загрузки последней версии React и Jest вы, вероятно, увидите следующее предупреждение, которое будет периодически появляться в любом из ваших тестов, импортирующих React:
Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills
Это связано с тем, что React 16 зависит от реализации requestAnimationFrame. Чтобы не выводить предупреждения, вам необходимо установить эту функцию перед каждой спецификацией.
Сначала создайте файл, содержащий только прокладку requestAnimationFrame:
// shim.js global.requestAnimationFrame = callback => setTimeout(callback, 0);
Во-вторых, добавьте ссылку на прокладку в свойство setupFiles
вашего JSON-файла конфигурации Jest:
"setupFiles": ["<rootDir>/path/to/shim.js"]
Теперь перед каждой спецификацией будет загружена прокладка, и предупреждение должно исчезнуть.
Обратите внимание, что файл прокладки должен быть первым файлом в массиве setupFiles
, если у вас есть другие файлы установки для загрузки. В противном случае любые зависимости реагирования, которые были импортированы до загрузки оболочки, не подхватят ее, и вы все равно получите предупреждение requestAnimationFrame при запуске тестов.
Enzyme 3 и React 16
Если вы используете Enzyme, вам нужно сделать несколько вещей, чтобы заставить его работать. Сначала скачайте последнюю версию:
npm i --save-dev enzyme enzyme-adapter-react-16
Теперь вам нужно настроить Enzyme для работы с React 16, предоставив ему правильный адаптер в начале ваших тестовых спецификаций:
// enzyme-setup.js import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
Теперь добавьте путь к вашему Jest configsetupFiles
array после прокладки.
"setupFiles": [ "<rootDir>/path/to/shim.js", "<rootDir>/path/to/enzyme-setup.js" ]
Теперь вы можете продолжить тестирование с помощью Enzyme в обычном режиме.