By: Билли Вонг & Скотт Купер
Здесь, в Sentry, нам нравится как можно больше Dogfood нашего продукта. Иногда это приводит к необычным приложениям нашего продукта, а иногда эти необычные приложения окупаются значимым образом. В этом сообщении мы рассмотрим один такой случай, когда мы используем Sentry JavaScript SDK для инструмента Шутка (который запускает наш набор тестов Frontend) и как мы решали проблемы, которые мы нашли.
У нас есть показатели высокого уровня для того, насколько хорошо (или нет) наш CI работает. Это полезно, чтобы получить общее представление о здоровье системы, однако это не помогает при более глубоком погружении в то, почему система медленная. Мы решили придумать наши задания CI на уровне Test Runner, чтобы получить представление о производительности отдельных тестов. Нам нужно было увидеть, замедляется ли наш тестовый набор, потому что мы добавляли больше тестов или это было потому, что у нас были плохие испытания.
Как упомянуто выше, мы используем Jest в качестве нашего тестового бегуна. Важно отметить, что наш метод инструментов требует использования Jest-Circus Тестовый бегун. Это по умолчанию для Jest версии 27, однако, его можно использовать с более ранними версиями Jest. Jest-Circus требуется, потому что это позволяет нам слушать события из шутки, используя Пользовательская среда и определение HandleteStevent метод Ниже приведен базовый тестовый фрагмент, аннотированный с приближением, где Jest-Circus События увольняются.
// --> setup // --> add_hook// --> start_describe_definition // --> add_hook // --> add_hook // --> add_hook // --> add_hook // --> add_test // --> finish_describe_definition // --> run_start describe('describe', function () { // --> run_describe_start // --> hook_start // --> hook_success beforeAll(function () {}); beforeEach(function () {}); afterEach(function () {}); afterAll(function () {}); // --> test_start // --> hook_start // --> hook_success it('test', function () { // --> test_fn_start expect(true).toBe(true); }); // --> test_fn_success // --> hook_start // --> hook_success // --> test_done // --> hook_start // --> hook_success }); // --> run_describe_finish // --> run_finish // --> teardown
Инструментация мониторинга производительности Sentry является деревьями по структуре с транзакцией в качестве корневого узла и охватывает как детские узлы. Мы можем использовать комбинацию имени события и имени теста, чтобы определить, следует ли либо создать транзакцию, создать детский промежуток из существующей транзакции, либо прекратить пролет/транзакцию. Вот Пример того, как мы это реализовали Анкет
Начать исследование медленного шумового теста немного похоже на то, чтобы заглянуть в черный ящик, потому что там так много абстракции. Итак, первые шаги — выясните, на какие тесты посмотреть, а затем выясните, что они тратят время. Самыми медленными тестами были все более крупные представления страниц со многими подкомпонентами и компонентами, которые получают доступ к данным из наших хранилищ данных. Большие компоненты должны быть медленнее, верно?
Глядя на тест «Индекс правил оповещения», мы видим, что Передеда Функция становится медленнее после каждого теста, но код в Передеда Блок остается прежним и должен занять столько же времени на первом тесте, сколько и на последнем тесте. Глядя на то, что в Передеда Функции было недостаточно, чтобы решить, что замедляет его. Передеда содержал несколько макетов API и призыв к ProjectStore.loadInitialData ([]); Это инициализировало магазин проекта с пустым массивом. Но ничего из этого не должно быть медленным, поэтому давайте пусть узел скажет нам, что происходит.
Начните шутить, используя отладчик узла только в одном тестовом файле. -INSpect-Brk Флаг говорит Узел, чтобы подождать, пока мы не приедуем нашего профилировщика.
node --inspect-brk node_modules/.bin/jest --runInBand --no-cache tests/js/spec/views/alerts/rules/index.spec.jsx
После профилирования теста и масштабирования в область, где проводятся тесты, мы обнаружили код, который работает во время Передеда Анкет На этом скриншоте мы переименовали анонимные Передеда Функция к именованной функции badbeforeeach Так что это можно найти проще. Ниже это один вызов ProjectSstore.loadInitialData Затем последовали несколько вызовов SetState и куча реагирующих работ, которую снимают. Этого не должно происходить, так как еще не должно быть компонента, слушая магазин.
Это заставило нас проверить, что компонент не был установлен после каждого теста. Мы добавили ComponentWillunMount к тестируемому компоненту класса с Консоль.log Когда мы не видели Консоль.log , мы проверили его вручную, отключив компонент после каждого теста.
Результат: наш Передеда Функция занимает долю секунды, каждую итерацию вместо того, чтобы выявлять обнаружение изменений в компонентах, которые должны были быть размонтированы, и наш тест имеет общее общее время сокращено почти вдвое. Ферментные документы предупредить вас, что призвание устанавливать вместо неглубокий Будет сохранить компоненты в DOM, и причина, по которой мы видим большее влияние на этот тест, заключается в том, что магазин все еще вызывает обнаружение изменений в компонентах, которые должны были быть уничтожены.
Используя функцию Sentry’s Trends Trends, мы можем подтвердить влияние на производительность этих изменений на тесты.
Мы представили пример Jest Environment что вы можете использовать, если вы заинтересованы в инструментировании своих собственных Jest -тестов. Вам нужно установить Jest-Sentry-Environment Упакуйте и обновите свою конфигурацию Jest, чтобы использовать предварительный пакет, а также предоставить ваш часовой DSN. Для получения дополнительных инструкций см. Репозиторий Анкет
Оригинал: «https://dev.to/sentry/instrumenting-our-frontend-test-suite-and-fixing-what-we-found-55»