(React testing) как получить отображаемые имена классов контейнера div

Я использую шутки, жасмин и реагирую тестовые утилиты для тестирования.(React testing) как получить отображаемые имена классов контейнера div

Я пытаюсь получить визуализированные имена классов на самом внешней DIV моего компонента - так ниже, учитывая я хочу ДИВ сказать <div class='page-content banana'> я хотел бы сказать что-то вроде:

expect(?).toEqual("page-content banana");

As show in this tutorial , Я попробовал ожидать (rootElement.classList [0]). ToEqual («банана содержимого страницы») Но это вызывает ошибку, даже с тем же кодом в сообщении.

Я бы даже был счастлив запустить функцию getClassNames в своем тесте, но не мог понять это.

Logging моего неглубокий выхода получает меня:

{ type: 'div', 
    key: null, 
    ref: null, 
    _owner: null, 
    _context: {}, 
    _store: 
    { props: { className: undefined, children: [Object] }, 
    originalProps: { className: undefined, children: [Object] } } }

// Страница Контейнер: (Reduced код для краткости)

import React, {Component, PropTypes} from 'react'; 
import classnames from 'classnames'; 

class PageContainer extends Component { 

    getClassNames() { 
    return classnames([ 
     'page-content', 
     this.props.classNames 
    ]); 
    } 

    render() { 
    return (
     <div className={this.getClassNames()}> // <- I want this 
     {this.getHeadline()} 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

export default PageContainer;

Моего Spec. Я пытался использовать как неглубокий рендеринга и рендеринга в DOM:

jest.dontMock('../../components/shared/PageContainer.jsx'); 

import React from 'react/addons'; 
import PageContainer from '../../components/shared/PageContainer.jsx'; 

const TestUtils = React.addons.TestUtils; 

function renderedOutput(elt) { 
    const shallowRenderer = TestUtils.createRenderer(); 
    shallowRenderer.render(elt); 
    return shallowRenderer.getRenderOutput(); 
} 

describe('<PageContainer />',() => { 

    let shallowPageContainer, pageContainerRendered; 

    beforeEach(() => { 

    const component = (
     <PageContainer headline='I am headline' classNames='banana'> 
     <p>The human torch was denied a bank loan.</p> 
     </PageContainer> 
    ); 

    shallowPageContainer = renderedOutput(component); 
    pageContainerRendered = TestUtils.renderIntoDocument(component); 
    }); 

    it('should have the correct class names',() => { 
    const renderedDOM = React.findDOMNode(pageContainerRendered); 
    expect(?).toEqual('page-content banana'); 

    }); 


});

источник

2015-09-01 Ben

'this.props.className'? –

У меня такая же проблема. Я получаю эту ошибку, когда пытаюсь получить доступ к 'renderedRoot.props.className' или' renderedRoot.className' из 'let renderedRoot = this.renderer.getRenderOutput();' Любые идеи? Это говорит: «Не обращайтесь к .props узла DOM; вместо этого воссоздайте реквизит, поскольку рендер сделал изначально или прочитал свойства/атрибуты DOM непосредственно из этого узла (например, this.refs.box.className). ' – cameronroe

Это работает для меня, но, пожалуйста, обратите внимание, что я использую простой Жасмин и testdom вместо Шутки, так YMMV:

var rendered = TestUtils.renderIntoDocument(component); 
const renderedDOM = React.findDOMNode(rendered); 
expect(rendered.getAttribute("class")).toEqual("page-content banana");

источник

2015-09-01 11:52:20 mik01aj

(React testing) как получить отображаемые имена классов контейнера div

ответ

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