Проверьте, что событие click в React обновляет HTML

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

Если я использую React.addons.TestUtils.Simulate.click(theComponent), чтобы попытаться проверить сортировку.

  • Я вижу, что событие обрабатывается,
  • что смена состояния завершена
  • данные сортируются перед вызовом setState

но когда я утверждаю против компонента, ничего не изменилось.

it('sorts the data when the year header is clicked', function() {
    var React = require('react/addons');
    var TestUtils = React.addons.TestUtils;

    var payTable = TestUtils.renderIntoDocument(
        <PayTable payYears={data} />
    );

    var headers = TestUtils.scryRenderedDOMComponentsWithTag(payTable, 'th');
    var yearHeader = headers[0];
    TestUtils.Simulate.click(yearHeader.getDOMNode());

    var columnValues = getYearColumnValues(payTable, TestUtils);
    columnValues.should.match([ 'Year', '1066', '1067', '1068' ]);
});

Нужно ли мне принудительно обновлять? Перечитать компонент?

Код доступен в Github.

Я могу проверить другие аспекты Компонента, но не значения Компонента после setState

Ответы

Ответ 1

У меня была такая же проблема. Дело в том, что TestUtils.Simulate.click(yearHeader.getDOMNode()) делает щелчок по DOM, что приводит к сортировке данных и манипуляциям с DOM. Даже если вы используете jsDom, а не реальный dom, эта манипуляция сама по себе является асинхронным событием. Итак, просто проверив состояние DOM сразу после события click, вы делаете синхронный вызов, в котором состояние DOM еще не изменено.

Решение: используйте setTimeout с таймаутом в 0 миллисекунд и проверьте состояние DOM. Что касается вас, например:

setTimeout(function() {
  var columnValues = getYearColumnValues(payTable, TestUtils);
  columnValues.should.match([ 'Year', '1066', '1067', '1068' ]);
},0)

Это сделает ваше обновление DOM своим состоянием, и вы сможете протестировать свой компонент.

Ответ 2

Я потратил много времени, пытаясь найти чистый способ работать с асинхронностью... Завершилось это для тестирования:

https://github.com/yormi/test-them-all

Под капотом он использует жизненный цикл componentDidUpdate для прослушивания изменений реквизита/состояния/маршрута.

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