I've recently started using Jest to test my React components, and this is my very first test. Here's the code snippet for my component:
import React from 'react';
import PropTypes from 'prop-types';
import uuidv1 from 'uuid';
import withStyles from 'react-jss';
const styles ={
keyvaluestyle:{
fontSize: props => props.keyvalueFontsize,
display: props => props.keyvalueDisplay,
verticalAlign: 'top',
width: props => props.keyvalueWidth,
margin: props => props.keyvalueMargin,
}
}
const KeyValueJCpenny1 = ({
children,keyvalId,keyId,valueId, classes}) =>{
return(
<div className={classes.keyvaluestyle} data-element-type-id="KEY_VALUE_CONTAINER" data-element-id={keyvalId} data-key-id={keyId} data-clickable-value-id={valueId} data-component-name="true">
{children}
</div>
)
}
KeyValueJCpenny1.propTypes = {
/**
* KeyValue label for JCpenny form 1.
*/
children: PropTypes.node.isRequired,
keyvalId:PropTypes.any.isRequired,
keyId : PropTypes.any.isRequired,
valueId : PropTypes.any.isRequired,
keyJCpennyClass : PropTypes.string.isRequired
};
KeyValueJCpenny1.defaultProps = {
keyId : uuidv1(),
keyvalId : uuidv1(),
valueId : uuidv1(),
children : 'key of jcpenny',
keyJCpennyClass : 'keyJCpenny1'
};
export default withStyles(styles)(KeyValueJCpenny1)
Here is the test code I'm using:
import React from 'react';
import {configure, shallow, mount} from 'enzyme';
import KeyValueJCpenny1 from '../KeyValueJCpenny1/KeyValueJCpenny1';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter:new Adapter()});
describe('key value container',()=>{
it('renders container for key and value', ()=>{
const wrapper = mount(<KeyValueJCpenny1 className="keyvalue"/>);
expect(wrapper.find('.keyvaluestyle').hasClass('keyvaluestyle').to.equal(true))
})
})
However, I am encountering an error as shown https://i.stack.imgur.com/vWaU7.png. Could you please assist me in resolving this issue or provide guidance on how to effectively conduct unit testing for my components?