Javascript React单元测试：TypeError:无法读取属性'；测试'；未定义的

我正在使用karma jasmine对React应用程序进行单元测试。但是，经常出现如下错误

TypeError:无法读取未定义的属性“test”

在validateInput.validateInput（src/components/validateInput.js:47:42）
在ValidatedInput.isValid（src/components/ValidatedInput.js:33:27）
反对。（src/\uuuuuu tests\uuuu/validated\u input-test.js:64:24）
在Promise.resolve.then.el（node_modules/p-map/index.js:42:16）
在进程中。_tick回调（内部/process/next_tick.js:109:7）

下面是我的测试文件

已验证的输入测试.js

description（'functions'，（）=>{
const component to checkfunctions=TestUtils.renderIntoDocument(
{}}
onComponentMounted={（）=>{}
validaions={/^（？=.[A-Za-z]）（？=.*\d）[A-Za-z\d]{8,16}$/}
validationError={'Invalid Password Format'}
/>);
const renderedDOMNode=TestUtils.findrenderedomComponentWithClass(
用于检查函数“表单输入”的组件
);
它（'应该检查验证密码'，（）=>{
期望（浅）(
).instance（）.isValid（renderDomNode））.equals（true）；
});
});

以及用于测试的文件

ValidatedInput.js

import React，{Component}来自'React'；
类ValidateInput扩展组件{
建造师（道具）{
超级（道具）；
这个州={
验证：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（即target.value）；
var isValidField=此.isValid（即目标）；
}
isValid（inputElement）{
if（inputElement.getAttribute（'required'）！==null&&inputElement.value===“”）{
inputElement.classList.add（'Error'）；
inputElement.nextSibling.textContent=this.props.validationError；
返回false；
}否则{
inputElement.classList.remove（'Error'）；
inputElement.nextSibling.textContent=''；
}
如果（inputElement.value！==“”）{
如果（！this.validateInput（inputElement.value））{
inputElement.classList.add（'Error'）；
inputElement.nextSibling.textContent=this.props.validationError；
返回false；
}否则{
inputElement.classList.remove（'Error'）；
inputElement.nextSibling.textContent=''；
}
}
返回true；
}
验证输入（值）{
var regularExpressionToBeMatched=this.props.validations；
返回此.state.validations.test（值）；
}
componentDidMount（）{
如果（此.props.onComponent已安装）{
此.props.onComponent已安装（此）；
}
}
渲染（）{
返回(
{this.props.title}
);
}
}
导出默认输入；

记录

this.props.validations

会产生

未定义的
。我尝试在
shallow
中传递道具，但错误仍然存在。关于如何处理错误或代码结构有什么建议吗？
谢谢。
validaions={/^（？=.[A-Za-z]）（？=.\d）[A-Za-z\d]{8,16}$/}

*验证

打字错误

  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)

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

    });

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;