Установить состояние с помощью редукции мелкой рендеринга

Я хочу протестировать компонент React с Shallow Rendering. Но я хочу проверить компонент в зависимости от его состояния.

Каков правильный способ? Я пробовал это:

  component = shallowRenderer.render(
    <TweetsBox
      users = 4
    />
  );
  component.setState({initial: true}); // This is not allowed

  renderResult = shallowRenderer.getRenderOutput();

Но я не могу заставить его работать. Каков правильный способ установки состояния при выполнении мелкой рендеринга?

Ответы

Ответ 1

Не похоже, что мелкий рендерер, возвращаемый React.addons.TestUtils.createRenderer, имеет возможность делать многое помимо рендеринга на основе переданного компонента, реквизита и дочерних элементов.

Мне пришлось использовать jsdom + React.addons.TestUtils.renderIntoDocument для установки состояния через событие (как прокомментировал @neil-kistner). Я предполагаю, что это то же самое, если вы хотите напрямую вызвать setState.

Вот что сработало для меня: 

import jsdom from "jsdom";
global.document = jsdom.jsdom("<!doctype html><html><body></body></html>");
global.window = document.parentWindow;
global.navigator = {
  userAgent: "node.js"
};
import React from "react/addons";
const TestUtils = React.addons.TestUtils;
import PriceAtTotalQuantity from "app/components/PriceAtTotalQuantity";
import { assert } from "chai";

describe("app/components/PriceAtTotalQuantity", function() {
  it("should show tooltip on mouseover", function() {
    const props = {
      currencyCode: "USD",
      offer: {
        priceWasConverted: true,
        priceAtTotalQuantity: 0.1
      }
    };
    var priceAtTotalQuantity = TestUtils.renderIntoDocument(React.createElement(PriceAtTotalQuantity, props));
    var currencyCodeNode = TestUtils.findRenderedDOMComponentWithClass(priceAtTotalQuantity, "currency-code").getDOMNode();
    assert.isFalse(priceAtTotalQuantity.state.tooltipIsVisible);
    TestUtils.Simulate.mouseOver(currencyCodeNode);
    assert.isTrue(priceAtTotalQuantity.state.tooltipIsVisible);    
  });
});