酵素で反応成分classNameをテストする

Question

酵素（マウントまたは浅い）を使用して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 
    r@tests.webpack.js:11:24087 
    assert@tests.webpack.js:14:52974 
    a@tests.webpack.js:14:55858 
    tests.webpack.js:15:17123 
    tests.webpack.js:14:10442 

    ✓ Uses content prop 

Answer 1

ここでの問題は、インポートimport styles from './styles.module.css'が実際に読み込まれていないことです。

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

が、私は十分に担当者を持っていない、または私はちょうどこれをコメントしています：

あなたがCSSの拡張子を持つ何かをモックするために、テスト・セットアップ・ファイル内の何かを持っている可能性があります。残念ながら、実際にこれらのスタイルをインポートする方法はまだわかりません。WebPack LESS imports when testing with Mocha

Answer 2

奇妙です。それは動作するはずです。

とにかく、酵素のAPIを代わりに利用することができます。この特定のテストのために

、.hasClass()は仕事をし、その意図について明確であるはずですが：

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