Я пытаюсь протестировать свойства рендеринга моего компонента React и при этом следовал некоторым советам, однако это не работает.
Компонент:
const AppMain = () =>{
return (
<main>
Enter datapack details here.
<Formik
initialValues = {{
pack_name: '',
pack_mcmeta:{
pack_format: '',
description: ''
},
data: {
}
}}
onSubmit = {(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
render = {({ isSubmitting }) => (
<Form className = "form-container">
<MetaFields />
<Divider variant = "middle"></Divider>
<Button variant = "outlined" type = "submit" disabled = {isSubmitting}>
Submit
</Button>
</Form>
)}>
</Formik>
</main>)
}
И мой тест:
import Enzyme, {shallow} from 'enzyme';
import AppMain from './AppMain';
import Adapter from 'enzyme-adapter-react-16';
import { Formik } from 'formik';
Enzyme.configure({ adapter: new Adapter()})
describe('<AppMain />', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<AppMain />);
});
it('Renders a form', () => {
const renderedForm = wrapper.renderProp('render')(false)
expect(renderedForm.exists('.form-container')).toEqual(true);
})
});
Но я получаю это сообщение об ошибке:
● › Renders a form
TypeError: ShallowWrapper::renderProp() can only be called on custom components 17 | }); 18 | it('Renders a form', () => { > 19 | const renderedForm = wrapper.renderProp('render')(false) | ^ 20 | expect(renderedForm.exists('.form-container')).toEqual(true); 21 | }) 22 | }); at ShallowWrapper.<anonymous> (node_modules/enzyme/build/ShallowWrapper.js:1471:19) at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1960:25) at ShallowWrapper.renderProp (node_modules/enzyme/build/ShallowWrapper.js:1469:21) at Object.renderProp (src/AppMain.spec.js:19:38)
Я не нашел что-нибудь в Интернете о заголовке сообщения об ошибке:
TypeError: ShallowWrapper::renderProp() can only be called on custom components



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Сообщение об ошибке:
TypeError: ShallowWrapper::renderProp() can only be called on custom components
Говорит, что renderProp запускается на элементе, отличном от jsx, например. базовый HTML-элемент.
Там, где вы думали, что он работает на элементе Formik, он работал на элементе main, который не может иметь renderProps, поэтому тест сразу же проваливается.
Вам нужно изменить свой код, чтобы он работал на элементе Formik.
@anacs Вам нужно изменить свой код, чтобы он работал на элементе Formik.
и как пройти мимо этого?