Использование отладчика Node в тестах Jest

Если вы когда-нибудь сидите со мной на уроке или в паре, вы можете услышать, как я говорю ученику, чтобы он прекратил использовать console.log() в процессе отладки React и вместо этого полагался на debugger через свои инструменты Chrome DevTools. Для этого есть веская причина. console.log обычно позволяет задать один вопрос о вашем коде: «Что это сейчас такое?».

debugger, с другой стороны, позволяет задавать много вопросов; «Каково состояние моего компонента прямо сейчас?», «Мои локальные переменные такие, как я думаю?», «Правильно ли передается это событие клика в мой обработчик событий?»

Как правило, когда вы переходите на использование debugger, вы можете быстрее работать в процессе разработки React, потому что вы можете собирать больше точек данных о том, что происходит. Информация - это сила.

Однако, когда мы пишем тесты, наш код внезапно перестает работать в браузере, и мы теряем доступ к нашему стандартному отладчику. Особенно когда вы новичок, это расстраивает, так как вы хотели бы иметь возможность использовать те же инструменты для отладки тестов, что и рабочий код.

К счастью, есть способ сделать это!

Открытие Chrome Inspector

Во-первых, нам нужно открыть инспектор узлов. Вы можете использовать любую из нескольких технологий для подключения к инспектору Node.js, но, поскольку я уже упоминал об использовании Chrome DevTools, давайте воспользуемся этим. Вы можете открыть инспектор, перейдя к chrome://inspect в браузере Chrome. Это должно привести вас к окну, которое выглядит следующим образом:

Щелкните ссылку Open dedicated DevTools for Node, и вам будут доступны инструменты DevTools, с которыми вы знакомы по реакции разработки.

Отладка некоторых тестов

Нам понадобится код для отладки. Вы можете использовать любой набор тестов Jest, как я собираюсь здесь, но если вы хотите продолжить, не стесняйтесь использовать этот репозиторий, минимальную реализацию Tic-Tac-Toe, которую я создал.

Нам нужно указать Node запустить Jest с включенным агентом инспектора, что можно выполнить с помощью флага --inspect. Кроме того, мы должны указать Jest запускать тесты последовательно, а не в пуле, чтобы мы могли быть уверены, что тесты выполняются в ожидаемом нами порядке. Это можно сделать, запустив Jest с флагом --runInBand.

Если вы используете пример репозитория, вы можете увидеть, что я добавил все это как сценарий npm, testDebug в package.json:

{ 
  "name": "jesting", 
  "version": "1.0.0", 
  "description": "Test module for writing a variety of jest tests", 
  "main": "index.js", 
  "scripts": { 
    "test": "jest", 
    "testDebug": "node --inspect node_modules/.bin/jest --runInBand" 
  }, 
  "author": "Will Mitchell <[email protected]>", 
  "license": "ISC", 
  "devDependencies": { 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0", 
    "babel-preset-env": "^1.7.0", 
    "jest": "^23.5.0" 
  }, 
  "dependencies": { "react": "^16.4.2" } 
}

Теперь, когда я запускаю тесты с новым скриптом, он будет уважать любые debugger команды, с которыми он столкнется, и мы сможем задавать вопросы о нашем коде в инспекторе.

Кроме того, я могу разместить свои debugger операторы либо в тестах, либо в моем коде, он остановит выполнение в обоих местах. Если вы пытаетесь определить, почему конкретный тест не работает должным образом, это может быть особенно полезно:

// index.js 
checkRowWinner = () => { 
  const xWins = this.board.some(row => row.every(cell => cell === 'X')) 
  const oWins = this.board.some(row => row.every(cell => cell === 'O')) 
  debugger 
  if(xWins) { 
    return 'X' 
  } else if(oWins) { 
    return 'O' 
  } 
}
// index.test.js 
it.only('knows if there is a row win', () => { 
  game.board = [['X', 'X', 'X'],[null, null, null],[null, null, null]] 
  const expected = 'Game over. X wins!' 
  const result = game.status() 
  debugger 
  expect(result).toEqual(expected) 
})

Последние мысли

Написание тестов не должно быть сложнее, чем написание кода, и принятие этого решения сделает ваш код более надежным, масштабируемым и поддерживаемым. Упростите себе задачу, используя инструменты, с которыми вы уже знакомы.

Удачного взлома!

Первоначально опубликовано на wvmitchell.net 1 сентября 2018 г.

Использование отладчика Node в тестах Jest