Как имитировать события браузера при написании тестов для React js?

Ответ 1

Начиная с версии React 0.9, мы включили ReactTestUtils, который представляет собой небольшой набор инструментов, которые помогут вам протестировать ваши компоненты. Самой полезной частью этого является симуляция событий - вы можете запустить ReactTestUtils.Simulate.click(node), чтобы имитировать событие клика с использованием синтетической системы событий React.

Там также есть несколько других полезных утилит для утверждения утверждений о структуре DOM. Просто загрузите сборку addons (react-with-addons.js) и вытащите ее так:

var ReactTestUtils = React.addons.TestUtils;
ReactTestUtils.Simulate.click(node);

Сообщите мне, если что-то неясно здесь.

Ответ 2

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

Например, у меня есть компонент, который должен что-то сделать в ответ на нажатие клавиши "tab"

// this is hooked up in my render function
onKeyPress: function (e) {
  if (e === 9) {
    e.preventDefault()
    this.onTab(e.shiftKey)
    return
  }
  ..
},
onTab: function (shift) {
  var newstate = states.tab(shift, this.state)
  if (newstate) this.setState(newstate)
}

Затем в файле states.js у меня есть логическая обработка, как я должен изменить состояние на основе текущего состояния и тот факт, что пользователь нажал клавишу табуляции. Этот метод states.tab является 100% unittestable, потому что это "чистый" — никаких побочных эффектов. Он принимает состояние и возвращает новое состояние.

И, возможно, это не "ответ на вопрос" напрямую, но я стараюсь быть полезным =) Развязка логики изменения состояния от обработчиков событий сделает ваш код намного более проверяемый и поддерживаемый.

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