使用React Shallow Rendering设置状态

Question

使用React Shallow Rendering设置状态

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

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

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

  renderResult = shallowRenderer.getRenderOutput();

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

mar*_*say 2

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);    
  });
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	2974 次
最近记录：	10 年，8 月前