Question

我使用karma-jasmine对React App进行单元测试。但是，有如下的重复错误

TypeError：无法读取未定义的属性'test'

  at ValidatedInput.validateInput (src/components/ValidatedInput.js:47:42)
  at ValidatedInput.isValid (src/components/ValidatedInput.js:33:27)
  at Object.<anonymous> (src/__tests__/validated_input-test.js:64:24)
  at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
  at process._tickCallback (internal/process/next_tick.js:109:7)

以下是我的测试文件

validated_input-test.js

    describe('functions', () => {
        const componentToCheckFunctions = TestUtils.renderIntoDocument(
            <ValidatedInput
                type={'password'}
                name={'password'}
                title={'Password'}
                value={'Sample123Test'}
                placeholder={'Sample Placeholder'}
                onChange={() => {}}
                onComponentMounted={() => {}}
                validaions={/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/}
                validationError={'Invalid Password Format'}
        />);

        const renderedDOMNode = TestUtils.findRenderedDOMComponentWithClass(
            componentToCheckFunctions, 'form-input'
        );

        it('should check validate password', () => {
            expect(shallow(<ValidatedInput />
            ).instance().isValid(renderedDOMNode)).equals(true);
        });

    });

和测试文件

ValidatedInput.js

import React, { Component } from 'react';

class ValidatedInput extends Component {
    constructor(props) {
        super(props);

        this.state ={
            validations: this.props.validations,
            validationError: this.props.validationError
        };

        this.handleChangeValue = this.handleChangeValue.bind(this);
        this.isValid = this.isValid.bind(this);
        this.validateInput = this.validateInput.bind(this);
    }

    handleChangeValue(e) {
        this.props.onChange(e.target.value);
        var isValidField = this.isValid(e.target);
    }

    isValid(inputElement) {
        if (inputElement.getAttribute('required') !== null && inputElement.value === "") {
            inputElement.classList.add('Error');
            inputElement.nextSibling.textContent = this.props.validationError;
            return false;
        } else {
            inputElement.classList.remove('Error');
            inputElement.nextSibling.textContent =  '';
        }

        if(inputElement.value !== "") {
            if(!this.validateInput(inputElement.value)) {
                inputElement.classList.add('Error');
                inputElement.nextSibling.textContent = this.props.validationError;
                return false;
            } else {
                inputElement.classList.remove('Error');
                inputElement.nextSibling.textContent =  '';
            }
        }
            return true;
    }

    validateInput(value) {
        var regularExpressionToBeMatched = this.props.validations;
        return this.state.validations.test(value);
    }

    componentDidMount() {
        if (this.props.onComponentMounted) {
            this.props.onComponentMounted(this);
        }
    }

    render () {
        return (
            <div className="form-group">
                <div className="col-5 text-center">
                    <label htmlFor={this.props.name}>{this.props.title}</label>
                </div>
                <div className="col-5 text-center">
                    <input
                        className="form-input text-center"
                        type={this.props.type}
                        ref={this.props.name}
                        name={this.props.name}
                        value={this.props.value}
                        required={this.props.isRequired}
                        placeholder={this.props.placeholder}
                        onChange={this.handleChangeValue}
                    />
                    <span className='Error'></span>
                </div>
            </div>
        );
    }
}

export default ValidatedInput;

记录this.props.validations会产生undefined。我尝试在shallow<ValidatedInput />中传递道具，但错误仍然存在。关于如何处理错误或代码结构的任何建议？感谢。

Answer 1

validaions = {/ ^（？= [A-ZA-Z]）（？=。 \ d）[A-ZA-Z \ d] {8,16} $ / }

*验证

错字

React Unit Testing：TypeError：无法读取undefined的属性'test'

1 个答案: