Блог

Я новичок в Jestjs и enzyme framework, и я пытаюсь написать тестовые примеры для определенного компонента react, и я немного застрял.

 export class ProductDetailsForm extends Component{

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

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

Я начал с тестового примера, но я застрял и не могу продолжить, как работать с функцией handleMetaDataDefinition для полного покрытия, включая функцию checkSpecialCharacters. Ниже приведен код, который я начал писать для ProductDetailsForm.test.js

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

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

Я использовал некоторую часть моего фактического кода, а не весь код целиком, поскольку мне нужна помощь в этой конкретной части только для написания тестового примера для методов handleMetaDataDefinition и checkSpecialCharacters.

Есть два возможных варианта написания ваших тестов.

1. Вы можете запустить проверку из своего компонента MetaDataDefinition и передать туда необходимые данные.

     test("should call handleMetaDataDefinition", ()=&&t; {
        const component = wrapper.find('MetaDataDefinition');
        fillYourComponentSomehow();
        tri&&erAnEventSomehow();
        /*For example component.find('button').simulate('click');
        wrapper.update();// We can wait for updatin& state differently(if needed i'll take a look to doc.)
        expect(wrapper.state()).toBe(stateThatYouExpect);
    });
  

2. Или вы можете протестировать его как «черный ящик»

     test("should call handleMetaDataDefinition", ()=&&t; {
        const component = wrapper.find('MetaDataDefinition');
        component.props().handleMetaDataDefinition(objectForMethod)
        wrapper.update();
        expect(wrapper.state()).toBe(stateThatYouExpect);
    });
  

Если у вас есть HOC вокруг вашего компонента, вам нужно будет найти этот компонент по имени класса
wrapper.find('ProductDetailsForm')

ОБНОВЛЕНИЕ Вы можете протестировать его следующим образом

 let wrapper;
let setProductDetailsFormValue;
beforeEach(() =&&t; {
   setProductDetailsFormValue = jest.fn();
    wrapper = shallow(
        <ProductDetailForm setProductDetailsFormValue={setProductDetailsFormValue} /&&t;
    );
});
test("should call handleMetaDataDefinition", ()=&&t; {
        const testObject = { tar&et: {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 !@#$%^amp;*() {}:;?|\[]'"= are not allowed');
        expect(wrapper.state()[xmlVersion]).toBe('!!!123asd!');
        expect(setProductDetailsFormValue).toBeCalledWith({
             [xmlVersion]: '!!!123asd!',
             ...other fields})
    });