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 configsetupFilesarray после прокладки.

"setupFiles": [
    "<rootDir>/path/to/shim.js", 
    "<rootDir>/path/to/enzyme-setup.js"
]

Теперь вы можете продолжить тестирование с помощью Enzyme в обычном режиме.