TypeError: ShallowWrapper::renderProp() 只能在自定义组件上调用答案

【问题标题】：TypeError: ShallowWrapper::renderProp() can only be called on custom componentsTypeError: ShallowWrapper::renderProp() 只能在自定义组件上调用
【发布时间】：2019-06-08 09:33:53
【问题描述】：

我正在尝试测试我的 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);
    })
});

但我收到此错误消息：

● › 呈现表单

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() 只能在自定义组件上调用

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

错误信息：

TypeError: ShallowWrapper::renderProp() 只能在自定义组件上调用

表示 renderProp 正在非 jsx 元素上运行，例如一个基本的 html 元素。

您认为它在 Formik 元素上运行的地方，它在 main 上运行，它不能有 renderProps，因此测试立即失败。

您需要更改代码以在 Formik 元素上运行。

【讨论】：

以及如何克服这个问题？
@anacs 您需要更改代码以在 Formik 元素上运行。