Menu
When testing a react component which uses className to set the css class using enzyme (mount or shallow) I'm able to test correctly when it's a div but unable to get it to work on an h1 tag.
Is this some
Any thoughts appreciated!
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')
});
});
Test Results:
Notice the debug log which shows the h1 with class myheader, but the test fails with zero elements found for 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
729
To pass class names as props to a React component:Pass a string containing the class names as a prop. Destructure the prop in the child component. Assign the class names to an element, e.g. <h2 className={className}>Content</h2> .
To find elements by className in React testing library: Render a component and destructure the container object from the result. Use the getElementsByClassName() method on the container to find elements by class name.
If you want mimic real-world user interactions, the React Testing Library is the way to go because you can do the same with fireEvent functions. Meanwhile, Enzyme is better suited to situations where you have to match the state of React or some other function with state.
You can use testing-library/jest-dom custom matchers. The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain. Save this answer.
Weird. It should work.
Anyway, you could try taking advantage of Enzyme's API instead.
For this particular test, .hasClass() should do the job and is clearer about its intent:
expect(wrapper.find('h1').hasClass('myheader')).to.eq(true)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
