错误:语法错误,无法识别的表达式:不支持的伪:无效/RectJS/Unit Testing

Error: Syntax error, unrecognized expression: unsupported pseudo: invalid / ReactJS / Unit Testing

本文关键字:错误 语法 无效 RectJS Unit Testing 不支持 识别 表达式      更新时间:2023-09-26

当我进行此测试时,我得到以下错误:"错误:语法错误,无法识别的表达式:不支持的伪:无效"。

我不知道我的代码有什么问题。有人能给我看看吗?非常感谢。

jest.disableAutomock();
jest.unmock('../resources/assets/js/testcomponents/InputText.js');
jest.dontMock('react-bootstrap');
_ = require('lodash');
$ = require('jquery');
var React = require('react'),
    InputText = require('../resources/assets/js/testcomponents/InputText.js').InputTextEditable,
    TestUtils = require('react-addons-test-utils'),
    ReactDOM = require('react-dom');

describe('InputText', function () {
    var InputElement = TestUtils.renderIntoDocument(
        <InputText
            area={false}
            //evts={{onChange: handleChange}}
            attributes={{
                                label:'Test Input Isole',
                                name:'InputTextArea',
                                value: '',
                                wrapperClassName: 'col-md-4',
                                labelClassName: 'col-md-2',
                                groupClassName: 'row'
                                }}
            //ref="InputField"
            editable={true}/>);
    var DomElement = ReactDOM.findDOMNode(InputElement);
    //var inputV = ReactDOM.findDOMNode(InputElement.refs.InputField);
    var input = DomElement.getElementsByTagName('input')[0];

    it('updates input value on key press', function () {
        TestUtils.Simulate.change(
            DomElement.getElementsByTagName('input')[0],
            {target: {value: 'a'}}
        );
        expect(input.getAttribute('value')).toEqual('a');
    });

编辑:这是我的组件

var InputText = React.createClass({
    mixins: [MixinInputValue],
    propTypes: {
        attributes: React.PropTypes.object,
        evts: React.PropTypes.object,
        gestMod: React.PropTypes.bool,
        area: React.PropTypes.bool,
        validator: React.PropTypes.func
    },
    getDefaultProps: function () {
        return {
            attributes: {},
            evts: {},
            gestMod: true,
            area: false,
            validator: function (val, props, state) {
                if (val.length == 0 && typeof(props.attributes.required) != 'undefined' && props.attributes.required) {
                    return {isValid: false, style: 'default', tooltip: ''};
                }
                else if (val.length == 0) {
                    return {isValid: true, style: 'default', tooltip: ''};
                }
                else {
                    return {isValid: true, style: 'success', tooltip: ''};
                }
            }
        };
    },
    render: function () {
        console.log('passerender');

        var attrs = this.generateAttributes();
        var type = this.props.area ? "textarea" : "text";
        return (
            <Input
                className={this.props.menuClassName}
                type={type}
                {...attrs}
                {...this.props.evts}
                className={this.props.menuClassName}
                onChange = {this.handleChange}
                onBlur = {this.handleBlur}
                value={this.state.value}
                ref = "InputField"
                hasFeedback
            />
        );
    }
});

第二次编辑=好的,我想问题来自这个文件

getStateAttributes: function (val, DOM) {
        var attrs = {};
        attrs = _.extend((this.props.gestMod ? {'data-gest-mod': this.props.gestMod} : {}), attrs);
        var validation = this.props.validator(val, this.props, this.state, DOM);
        var html5Validity = true;
        if (DOM !== undefined) {
            console.log("petit message", DOM.outerHTML);
            var temp = $(DOM.outerHTML);
            temp.find('div');
            html5Validity = DOM.querySelectorAll(':invalid').length == 0;
 //           html5Validity = temp.find(':invalid').length == 0;
        }
        attrs = _.extend({'data-valid': validation.isValid && html5Validity}, attrs);
        // 4. AJOUT DU STYLE REACTB
        var style = {'bsStyle': (!Validator.matches(validation.style, 'success|warning|error', 'i') ? undefined : validation.style)};
        if (!html5Validity) {
            style = {'bsStyle': 'error'};
        }
        if (validation.tooltip.length > 0) {
            style.help = validation.tooltip;
        }
        attrs = _.extend(style, attrs);
        return attrs;
    },

这个代码就是问题所在:

        var html5Validity = true;
        if (DOM !== undefined) {
            console.log("petit message", DOM.outerHTML);
            var temp = $(DOM.outerHTML);
            temp.find('div');
            html5Validity = DOM.querySelectorAll(':invalid').length == 0;
 //           html5Validity = temp.find(':invalid').length == 0;
        }
        attrs = _.extend({'data-valid': validation.isValid && html5Validity}, attrs);

我对此进行了尝试,以解决我的问题及其工作!:

var html5Validity = true;
if (DOM !== undefined) {
    try {
        html5Validity = $(DOM).find(':invalid').length == 0;
        console.log('pass');
    } catch (e) {
        console.log('catch');
        html5Validity = true;
    }
}
attrs = _.extend({'data-valid': validation.isValid && html5Validity}, attrs);
相关文章: