gpt4 book ai didi

reactjs - 使用 React Shallow Rendering 设置状态

转载 作者:行者123 更新时间:2023-12-03 13:19:27 29 4
gpt4 key购买 nike

我想使用浅层渲染来测试 React 组件。但我想根据组件的状态来测试它。

这样做的正确方法是什么?我已经尝试过:

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

renderResult = shallowRenderer.getRenderOutput();

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

最佳答案

看起来React.addons.TestUtils.createRenderer返回的shallowRenderer除了根据传入的组件、 Prop 和子项进行渲染之外没有能力做很多事情。

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

关于reactjs - 使用 React Shallow Rendering 设置状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30809660/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com