За последние 4 с лишним года я создал множество вещей с помощью React; до недавнего времени прошло много времени с тех пор, как я изменил свою стратегию тестирования. Фактически, последней библиотекой, которую я добавил в свой набор инструментов для тестирования, был фермент (что было большим улучшением по сравнению с react-test-utils в то время). Однако в последнее время у меня была возможность попробовать что-то новое, и я был приятно удивлен Jest. Настолько, что мне кажется, что я бросаю некоторые из своих старых инструментов тестирования.

Загадка веб-пакетов

Webpack стал для меня незаменимым инструментом при разработке приложений React, но всегда были небольшие разногласия между использованием webpack для запуска сервера разработки и производственных сборок и использованием его для настройки тестовой среды. Мой подход заключался в использовании karma с karma-webpack, но чем больше становилось приложение, тем медленнее работал набор тестов. Я считаю, что получить преимущества от запуска тестов в браузере стоит, но я также нетерпелив и хочу использовать свое время как можно эффективнее.

Введите шутку

Чтобы Jest начал работать с моим веб-пакетом, мне нужно было выполнить некоторую настройку. Я следил за руководством в документации, по которому мои тесты были запущены. Первое, что я заметил, это то, как быстро запускается набор тестов! Больше не нужно ждать запуска сборки веб-пакета до того, как mocha даже запустит тесты. Я уже был впечатлен, но мне нужно было еще кое-что, чтобы сделать действительно отличную настройку для тестирования.

Введите фермент

В конце концов, я хочу использовать фермент для проверки поведения компонентов. Снэпшот-тесты - это прекрасно, но я не думаю, что их самих достаточно, чтобы гарантировать регрессию в поведении приложения. Заставить шутку и энзим работать вместе оказалось на удивление легко благодаря jest-enzyme и jest-environment-enzyme. Теперь у меня была скорость, снимки и имитация из Jest, а также тестирование поведения из энзима. Все начинает складываться, но как насчет тестирования клиента API?

Введите jest-fetch-mock

После добавления и настройки jest-fetch-mock у меня появился последний инструмент, необходимый для правильного тестирования моего приложения. Теперь, когда fetch является стандартом для выполнения HTTP-запросов в JavaScript, фальшивый XHR и сервер sinon кажутся устаревшими, тогда как jest-fetch-mock выглядит актуальным и современным.

Времена они меняются

Мне потребовалось некоторое время, чтобы научиться шутить - а я все еще учусь, - но это было несложно, просто отличалось от того, к чему я привык. У любого сопоставителя, который я когда-либо использовал из chai, есть эквивалент в шутке, а насмешка шутки так же мощна и полезна, как шпионы и заглушки Sinon. После пары дней работы быстрых, надежных наборов тестов с четким, читаемым выводом я был убежден, что шутка (с энзимом и fetch-mock) станет моим новым постоянным инструментом тестирования. Вот небольшая суть, которую я собрал на тот случай, если вы захотите попробовать это на себе.