TypeError: ShallowWrapper :: renderProp () можно вызывать только для пользовательских компонентов

Question

Я пытаюсь протестировать реквизит рендеринга моего компонента 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>)
}

И мойtest:

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

Но я получаю это сообщение об ошибке:

● ›Отображает форму

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 () может вызываться только для пользовательских компонентов

Answer 1

Сообщение об ошибке:

TypeError: ShallowWrapper :: renderProp () можно вызывать только для пользовательских компонентов

говорит, что renderProp запускается для элемента не-jsx, например базовый элемент HTML.

Там, где вы думали, что он работает на элементе Formik, он работал на main, который не может иметь renderProps, поэтому тест сразу завершается неудачей.