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

我的测试：

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，因此测试立即失败。

TypeError：ShallowWrapper :: renderProp（）只能在自定义组件上调用

1 个答案: