효소가있는 반응 성분 클래스 이름 테스트하기

효소 (마운트 또는 얕은)를 사용하여 className을 사용하는 반응 성분을 테스트 할 때 div 인 경우 제대로 테스트 할 수 있지만 h1에서 작동하도록 할 수는 없습니다 꼬리표.효소가있는 반응 성분 클래스 이름 테스트하기

마운트 또는 얕은 함께 할 수있는이 일부

것입니까?
내가 누락 된 것이 있습니까?
버그입니까?

의견을 보내 주시면 감사하겠습니다.

JSX :

import React from 'react' 

export const PageNotFound = ({heading, content, wrapperCSS, headingCSS, contentCSS}) => (
<div className={ wrapperCSS }> 
    <div className={ contentCSS }> 
    { content } 
    </div> 
    <h1 className={ headingCSS }>{ heading }</h1> 
</div> 
) 

PageNotFound.propTypes = { 
    heading: React.PropTypes.string, 
    content: React.PropTypes.string, 
    wrapperCSS: React.PropTypes.string, 
    headingCSS: React.PropTypes.string, 
    contentCSS: React.PropTypes.string 
}; 

PageNotFound.defaultProps = { 
    heading: '404', 
    content: 'Page Not Found', 
    wrapperCSS: 'wrapper', 
    headingCSS: 'heading', 
    contentCSS: 'content' 
}; 

export default PageNotFound

사양 :

import React from 'react' 
import { expect } from 'chai' 
import { shallow, mount } from 'enzyme' 

import PageNotFound from './PageNotFound' 

describe('<PageNotFound/>', function() { 

let wrapper; 

beforeEach(() => { 
    wrapper = mount(<PageNotFound contentCSS="mycontent" headingCSS="myheader" content="Message" heading="My Title" />); 
}) 

it('Uses heading prop',() => { 
    expect(wrapper.find('h1').text()).to.eq('My Title') 
}); 

it('Uses headingCSS prop',() => { 
    console.log(wrapper.html()); 
    expect(wrapper.find('h1.myheader').length).to.eq(1) 
}); 

it('Uses content prop',() => { 
    expect(wrapper.find('div.mycontent').text()).to.eq('Message') 
}); 


});

테스트 결과 :

공지 클래스 myheader와 H1을 보여줍니다 디버그 로그,하지만 테스트가 발견 제로 요소와 함께 실패 h1.myheader

<PageNotFound/> 
    ✓ Uses heading prop 
LOG LOG: '<div class="_2t--u"><h1 class="myheader">My Title</h1><div class="mycontent">Message</div></div>' 
    ✗ Uses headingCSS prop 
    expected 0 to equal 1 
    [email protected]:11:24087 
    [email protected]:14:52974 
    [email protected]:14:55858 
    tests.webpack.js:15:17123 
    tests.webpack.js:14:10442 

    ✓ Uses content prop

출처

2016-07-20 stujo

여기서 수입은 import styles from './styles.module.css'입니다. 실제로로드되지 않습니다.

require.extensions['.css'] = function() { 
    return null; 
};

내가 충분히 담당자가 없거나 난 그냥이 댓글을 달았을 것이다 :

당신이 CSS를 확장 아무것도를 모의 테스트 설정 파일에 뭔가를 가능성이 높습니다. 안타깝게도 실제로이 스타일을 가져올 수있는 방법을 아직 모릅니다. 여기 내 질문에서 알 수 있습니다. WebPack LESS imports when testing with Mocha

출처

2016-07-20 18:10:00 Ryan27

덕분에, 나는 스타일이 참조 제거하고 문제가 계속 – stujo

이상한. 그것은 작동해야합니다.

어쨌든 Enzyme의 API를 대신 사용해 볼 수 있습니다. 이 특정 테스트에 대한

, .hasClass()는 일을 그 목적에 대해 명확해야합니다

expect(wrapper.find('h1').hasClass('myheader')).to.eq(true)

출처

2017-01-19 13:41:17

감사를 지속, 그게 문제라고 생각하지 않습니다 내가 다시 반응 할 때 이것을 시도 할 것이다! – stujo

효소가있는 반응 성분 클래스 이름 테스트하기

답변

관련 문제