在 hasClass 中获取错误以进行反应笑话测试

Question

我已经开始对我的反应组件进行开玩笑测试，这是我的第一次测试。我的组件代码是

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)

我的测试代码是

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

但是我的

出现错误

你能帮我解决这个问题吗issue.Or我怎样才能对我的组件进行单元测试

Answer 1

测试代码应该是

    import React from 'react';
    import renderer from 'react-test-renderer';

    import KeyValueJCpenny1 from '../KeyValueJCpenny1/KeyValueJCpenny1';

    describe('<KeyValueJCpenny1/>', () => {
    it('renders correctly', () => {    
        jest.mock('uuid', () => {
            return {
                uuidv1: jest.fn(() => 1)
            };
        });
        const tree = renderer
        .create(<KeyValueJCpenny1 className="keyvalue" keyvalueWidth='30%' keyvalueDisplay='inline-block' keyvalueMargin="10px 10px 0 0">
        test1 Key:</KeyValueJCpenny1>)
        .toJSON();
        expect(tree).toMatchSnapshot();
    });
});

在 hasClass 中获取错误以进行反应笑话测试

Getting error in hasClass for react jest testing

unit-testing

reactjs

jestjs

enzyme

jss