Question

当我进行此测试时，我收到以下错误：“错误：语法错误，无法识别的表达式：unsupported pseudo：invalid”。

我不知道我的代码有什么问题。有人能告诉我吗？谢谢！

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

2ND EDIT = 好吧我想问题来自这个文件

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;
    },

Answer 1

此代码出现问题：

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

错误：语法错误，无法识别的表达式：unsupported pseudo：invalid / ReactJS / Unit Testing

1 个答案: