Testing React Component Klassenname mit Enzym

Question

Beim Testen einer Reaktionskomponente, die className verwendet, um die CSS-Klasse mit Enzym (mount oder seicht) zu setzen, kann ich richtig testen, wenn es ein div ist, aber nicht auf einem h1 arbeiten Etikett.

Ist das eine

• Sache mit dem Berg oder flach zu tun?
• Ist es etwas, was ich vermisse?
• Ist es ein Fehler?

Irgendwelche Gedanken geschätzt!

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 

Spec:

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') 
}); 


}); 

Testergebnisse:

Beachten Sie das Debug-Protokoll, das das h1 mit Klasse myHeader zeigt, aber der Test nicht mit Null-Elementen gefunden 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

Das Problem hier ist, dass Ihr Import import styles from './styles.module.css' nicht tatsächlich geladen wird.

Es ist wahrscheinlich, dass Sie etwas in einer Test-Setup-Datei mit einer CSS-Erweiterung zu verspotten alles haben:

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

Ich habe nicht genug rep haben, oder ich würde dies nur kommentiert haben. Leider weiß ich noch nicht, wie ich diese Stile tatsächlich importieren kann, wie Sie an meiner Frage hier sehen können: WebPack LESS imports when testing with Mocha

Answer 2

Seltsam. Es sollte funktionieren.

Wie auch immer, Sie könnten stattdessen versuchen, die API von Enzyme zu nutzen.

Für diesen speziellen Test, .hasClass() sollte die Arbeit tun und ist klarer über seine Absicht:

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