Получение ошибки в hasClass для тестирования jest - PullRequest
Новая
       16

Получение ошибки в hasClass для тестирования jest

0 голосов
/ 14 февраля 2019

Я начал шутливое тестирование своего реактивного компонента, и это мой первый тест.мой код компонента 

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

Но я получаю ошибку для моего

enter image description here

Не могли бы вы помочь мне решить эту проблему. Или как мне выполнить модульное тестирование для моих компонентов

1 Ответ

0 голосов
/ 14 февраля 2019

Тестовый код должен быть 

    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();
    });
});
...