Состояние установки с реактивом Мелкое рендеринг

Я хочу протестировать компонент React с мелким рендерингом. Но я хочу проверить компонент в зависимости от его состояния.Состояние установки с реактивом Мелкое рендеринг

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

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

    renderResult = shallowRenderer.getRenderOutput();

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

источник

2015-06-12 Hommer Smith

Что делает компонент взгляд TweetsBox как? Обычно у вас должно быть начальное состояние. Тогда может произойти какое-то событие, чтобы изменить состояние. –

Он не похож на shallowRenderer возвращенного 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);  
    }); 
});

источник

2015-06-17 15:06:06 markplindsay

Состояние установки с реактивом Мелкое рендеринг

ответ

Смежные вопросы