Reactjs 如何在Jestjs中为验证方法创建测试用例

我不熟悉Jestjs和Ezyme框架，我正在尝试为一个特定的react组件编写测试用例，我有点卡住了

export class ProductDetailsForm extends Component{

    handleMetaDataDefinition = e => {
    const { value, name } = e.target;
    if (name === "xmlVersion") {
        this.checkSpecialCharacters(value);
    }
    this.setState(prevState => ({
        ...prevState,
        [name]: value
    }));
    this.props.setProductDetailsFormValue({
        ...this.props.productDetailsForm,
        [name]: value
        });
    };

    checkSpecialCharacters = value => {
        if (!value || value.match(/^[a-zA-Z0-9._-]+$/)) {
            this.setState(() => ({ error: '' }));
        } else {
            this.setState(() => ({
                error: `Special characters and operators such as !@#$%^&*()+{}:;?|\\[]'"= are not allowed`
            }));
        }
    }
    
    render(){
        return(
            <div>
                <MetaDataDefinition
                    readOnly={false}
                    metaData={this.state}
                    handleMetaDataDefinition={this.handleMetaDataDefinition}
                    validateVersion={this.validateVersion}
                />
            </div>
        );
    }
}

导出类ProductDetailsForm扩展组件{
handleMetaDataDefinition=e=>{
const{value，name}=e.target；
如果（名称==“xmlVersion”）{
此.checkSpecialCharacters（值）；
}
this.setState（prevState=>({
…国家，
[名称]：值
}));
this.props.setProductDetailsFormValue({
…this.props.productDetails表单，
[名称]：值
});
};
checkSpecialCharacters=值=>{
如果（！value | | value.match（/^[a-zA-Z0-9.|-]+$/）{
this.setState（（）=>（{错误：'}））；
}否则{
此.setState（（）=>({
错误：`不允许使用特殊字符和运算符，如！@$%^&*（）+{}:；？\\\[]'“=`
}));
}
}
render（）{
返回(
);
}
}

我已经从测试用例开始，但是我被卡住了，无法继续如何处理函数handleMetaDataDefinition以实现包括函数checkSpecialCharacters在内的全面覆盖。下面是我开始为ProductDetailsForm.test.js编写的代码

let wrapper;
beforeEach(() => {
    wrapper = shallow(
        <ProductDetailForm />
    );
});

test("should call handleMetaDataDefinition", ()=> {
    wrapper.find('MetaDataDefinition').props('handleMetaDataDefinition');
});

let包装器；
在每个之前（（）=>{
包装纸=浅(
);
});
测试（“应调用handleMetaDataDefinition”，（）=>{
find（'MetaDataDefinition'）.props（'handleMetaDataDefinition'）；
});

---

我使用了实际代码的一部分，而不是全部代码，因为在这一特定部分中，我只需要帮助为handleMetaDataDefinition和checkSpecialCharacters方法编写测试用例。

有两种可能的选项来编写测试

您可以从MetaDataDefinition组件触发验证，并将所需的数据传递给该组件

或者您可以将其作为“黑盒”进行测试

如果组件周围有HOC，则需要按类名查找此组件

wrapper.find（'ProductDetailsForm'）

更新 你可以像这样测试它

let wrapper;
let setProductDetailsFormValue;
beforeEach(() => {
   setProductDetailsFormValue = jest.fn();
    wrapper = shallow(
        <ProductDetailForm setProductDetailsFormValue={setProductDetailsFormValue} />
    );
});
test("should call handleMetaDataDefinition", ()=> {
        const testObject = { target: {name: 'xmlVersion', value: '!!!123asd!'}, }
        const component = wrapper.find('MetaDataDefinition');
        component.props().handleMetaDataDefinition(testObject)
        wrapper.update();
        expect(wrapper.state().error).toBe('Special characters and operators such as !@#$%^&*()+{}:;?|\\[]'"= are not allowed');
        expect(wrapper.state()[xmlVersion]).toBe('!!!123asd!');
        expect(setProductDetailsFormValue).toBeCalledWith({
             [xmlVersion]: '!!!123asd!',
             ...other fields})
    });

let包装器；
让setProductDetailsFormValue；
在每个之前（（）=>{
setProductDetailsFormValue=jest.fn（）；
包装纸=浅(
);
});
测试（“应调用handleMetaDataDefinition”，（）=>{
const testObject={target:{name:'xmlVersion'，value:'！！！123asd！'，}
const component=wrapper.find（'MetaDataDefinition'）；
component.props（）.handleMetaDataDefinition（testObject）
wrapper.update（）；
expect（wrapper.state（）.error）.toBe（'不允许使用特殊字符和运算符，如！@$%^&*（+{}:；？\\[]'“=”）；
expect（wrapper.state（）[xmlVersion]）.toBe（'！！！123asd！'）；
expect（setProductDetailsFormValue）.toBeCalledWith({
[xmlVersion]：“！！！123asd！”，
…其他字段}）
});

有两种可能的方法来编写测试

您可以从MetaDataDefinition组件触发验证，并将所需的数据传递给该组件

或者您可以将其作为“黑盒”进行测试

如果组件周围有HOC，则需要按类名查找此组件

wrapper.find（'ProductDetailsForm'）

更新 你可以像这样测试它

let wrapper;
let setProductDetailsFormValue;
beforeEach(() => {
   setProductDetailsFormValue = jest.fn();
    wrapper = shallow(
        <ProductDetailForm setProductDetailsFormValue={setProductDetailsFormValue} />
    );
});
test("should call handleMetaDataDefinition", ()=> {
        const testObject = { target: {name: 'xmlVersion', value: '!!!123asd!'}, }
        const component = wrapper.find('MetaDataDefinition');
        component.props().handleMetaDataDefinition(testObject)
        wrapper.update();
        expect(wrapper.state().error).toBe('Special characters and operators such as !@#$%^&*()+{}:;?|\\[]'"= are not allowed');
        expect(wrapper.state()[xmlVersion]).toBe('!!!123asd!');
        expect(setProductDetailsFormValue).toBeCalledWith({
             [xmlVersion]: '!!!123asd!',
             ...other fields})
    });

let包装器；
让setProductDetailsFormValue；
在每个之前（（）=>{
setProductDetailsFormValue=jest.fn（）；
包装纸=浅(
);
});
测试（“应调用handleMetaDataDefinition”，（）=>{
const testObject={target:{name:'xmlVersion'，value:'！！！123asd！'，}
const component=wrapper.find（'MetaDataDefinition'）；
component.props（）.handleMetaDataDefinition（testObject）
wrapper.update（）；
expect（wrapper.state（）.error）.toBe（'不允许使用特殊字符和运算符，如！@$%^&*（+{}:；？\\[]'“=”）；
expect（wrapper.state（）[xmlVersion]）.toBe（'！！！123asd！'）；
expect（setProductDetailsFormValue）.toBeCalledWith({
[xmlVersion]：“！！！123asd！”，
…其他字段}）
});

每次调用'handleMetaDataDefinition'时，您也会调用this.setState几次（最好避免这样的事情）谢谢您的回答。但是如果（name==“xmlVersion”）{this.checkSpecialCharacters（value）；}，我将如何测试代码行我为您的问题添加了更新。您每次调用'handleMetaDataDefinition'都会调用this.setState几次（最好避免这样的事情）谢谢您的回答。但是如果（name==“xmlVersion”）{this.checkSpecialCharacters（value）；}我为您的问题添加了更新，我将如何测试代码行

let wrapper;
let setProductDetailsFormValue;
beforeEach(() => {
   setProductDetailsFormValue = jest.fn();
    wrapper = shallow(
        <ProductDetailForm setProductDetailsFormValue={setProductDetailsFormValue} />
    );
});
test("should call handleMetaDataDefinition", ()=> {
        const testObject = { target: {name: 'xmlVersion', value: '!!!123asd!'}, }
        const component = wrapper.find('MetaDataDefinition');
        component.props().handleMetaDataDefinition(testObject)
        wrapper.update();
        expect(wrapper.state().error).toBe('Special characters and operators such as !@#$%^&*()+{}:;?|\\[]'"= are not allowed');
        expect(wrapper.state()[xmlVersion]).toBe('!!!123asd!');
        expect(setProductDetailsFormValue).toBeCalledWith({
             [xmlVersion]: '!!!123asd!',
             ...other fields})
    });