Question

我想用Shallow Rendering测试一个React组件。但我想根据其状态测试组件。

这样做的正确方法是什么？我试过这个：

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

  renderResult = shallowRenderer.getRenderOutput();

但我不能让它发挥作用。在进行浅渲染时设置状态的正确方法是什么？

Answer 1

React.addons.TestUtils.createRenderer返回的shallowRenderer看起来不像基于传入的组件，道具和子项的渲染那样做了很多。

我必须使用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);    
  });
});

使用React Shallow Rendering设置状态

1 个答案: