How to test rc-field-form Field with Jest & Enzyme in react-native

I'm trying to test a react-native component that's part of a form. I don't know how to access - test the inner component of the Field.

The component i' m trying to test.

import React, {useState} from 'react';
import {View} from 'react-native';
import {Icon, CheckBox} from 'react-native-elements';
import {Field} from 'rc-field-form';

import {LockIcon} from '../components/LockIcon';
import {ValidationMessage} from '../components/Validation';
import {scaleFontSize, scaleIconSize} from '../Styles';

const CheckBoxWidget = props => {
  const {field, readOnly} = props;
  const [checked, setChecked] = useState(false);

  const toggleView = () => {
    setChecked(!checked);
  };

  return (
    <Field
      name={field.id}
      rules={[
        {required: field.mandatory.mobile, message: 'Required'},
        {type: 'boolean'},
      ]}>
      {(meta, context) => {
        return (
          <View>
            <View style={checkBoxStyles.widgetContainer}>
              <LockIcon readOnly={readOnly} />
              <CheckBox
                title={field.label}
                type="checkbox"
                iconRight
                checked={checked}
                disabled={readOnly}
                checkedIcon={
                  <Icon
                    type="material-community"
                    name="checkbox-marked-outline"
                    color="#1B75BB"
                    size={scaleIconSize(24)}
                  />
                }
                uncheckedIcon={
                  <Icon
                    type="material-community"
                    name="checkbox-blank-outline"
                    color="#1B75BB"
                    size={scaleIconSize(24)}
                  />
                }
                onPress={() => {
                  toggleView();
                  context.setFieldsValue({[field.id]: !checked});
                }}
                containerStyle={checkBoxStyles.checkBoxContainer}
                textStyle={checkBoxStyles.checkBoxText}
              />
            </View>
            <ValidationMessage errors={meta.errors} />
          </View>
        );
      }}
    </Field>
  );
};

export default CheckBoxWidget;

const checkBoxStyles = {
  widgetContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  checkBoxContainer: {
    backgroundColor: 'white',
    borderWidth: 0,
    paddingTop: 20,
    marginLeft: 0,
    flex: 1,
  },
  checkBoxText: {
    fontSize: scaleFontSize(16),
    color: '#86939e',
    marginLeft: 0,
    flex: 1,
  },
};

The test.


/* @jest-environment jsdom */
import React from 'react';
import CheckBoxWidget from '../CheckBoxWidget';
import {mount, shallow, render} from 'enzyme';

jest.mock('rc-field-form', () => {
  return {
    Field: () => jest.fn(),
  };
});

jest.mock('react-native-elements', () => {
  return {
    Icon: 'Icon',
    CheckBox: 'CheckBox',
  };
});

jest.mock('../../Styles.js', () => {
  return {
    scaleFontSize: () => jest.fn(),
    scaleIconSize: () => jest.fn(),
  };
});

describe('<CheckBox />', () => {
  const fieldProps = {
    id: 'checkbox-field',
    default: '',
    label: 'A label',
    mandatory: {
      mobile: true,
    },
    properties: {
      mobile_read_only: false,
    },
    type: 'checkbox',
  };
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<CheckBoxWidget field={fieldProps} readOnly={false} />);
  });
  it('Field matches the snapshot', () => {
    expect(wrapper).toMatchSnapshot();
  });
  it('renders correctly inner Field', () => {
    const item = wrapper.find('Component');
    const widgetWrapper = shallow(item);
    expect(widgetWrapper).toMatchSnapshot();
  });
});

The produced snapshot for the first test.

exports[`<CheckBox /> matches the Field snapshot 1`] = `
<Field
  name="checkbox-field"
  rules={
    Array [
      Object {
        "message": "Required",
        "required": true,
      },
      Object {
        "type": "boolean",
      },
    ]
  }
>
  <Component />
</Field>
`;

The above test exits with an error

 FAIL  src/widgets/__tests__/CheckBox.test.js (6.004 s)
  <CheckBox />
    ✓ matches the Field snapshot (12 ms)
    ✕ matches the inner component snapshot (56 ms)

  ● <CheckBox /> › matches the inner component snapshot

    TypeError: ShallowWrapper can only wrap valid elements

      46 |   it('matches the inner component snapshot', () => {
      47 |     const item = wrapper.find('Component');
    > 48 |     const widgetWrapper = shallow(item);
         |                           ^
      49 |     expect(widgetWrapper).toMatchSnapshot();
      50 |   });
      51 | });

I have also tried mounting <CheckBox /> with no success. Any help is much apprecated.